title: Owl Carousel Horizontal Thumbnail Bar- add navigation
body: <p>I have the following <code>owl carousel</code> with the <code>thumbnail bar</code>.</p>
  
  <p>Technology used here,</p>
  
  <ol>
  <li><a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="noreferrer">Owl Carousel 2.3.4</a></li>
  <li><a href="https://github.com/gijsroge/OwlCarousel2-Thumbs" rel="noreferrer">Owl carousel Thumbs</a></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.sv-slider .owl-carousel').owlCarousel({
    autoplay: false,
    autoplayHoverPause: true,
    dots: false,
    nav: true,
    thumbs: true,
    thumbImage: true,
    thumbsPrerendered: true,
    thumbContainerClass: 'owl-thumbs',
    thumbItemClass: 'owl-thumb-item',
    loop: true,
    navText: [
      "&lt;i class='fa fa-chevron-left' aria-hidden='true'&gt;&lt;/i&gt;",
      "&lt;i class='fa fa-chevron-right' aria-hidden='true'&gt;&lt;/i&gt;"
    ],
    items: 1,
    responsive: {
      0: {
        items: 1,
      },
      768: {
        items: 1,
      },
      992: {
        items: 1,
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sv-slider-item img {
    width: 100%;
    height: 200px;
  }
  
  .sv-slider .owl-thumbs {
    white-space: nowrap;
    overflow: auto;
  }
  
  .owl-thumbs button&gt;img {
    width: 200px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /&gt;
  
  
  
  
  
  &lt;div class="sv-slider"&gt;
    &lt;div class="owl-carousel" data-slider-id="1"&gt;
      &lt;div class="sv-slider-item"&gt;
        &lt;img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="sv-slider-item"&gt;
        &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="sv-slider-item"&gt;
        &lt;img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="sv-slider-item"&gt;
        &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="sv-slider-item"&gt;
        &lt;img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="owl-thumbs" data-slider-id="1"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the snippet it's working fine, but here I need a simple modification.</p>
  
  <p>I want to avoid the <code>horizontal scroll-bar</code> for the thumbnail and add navigation icons <code>&lt;</code> and <code>&gt;</code> in the both ends that perform well.</p>