title: OwlCarousel Thumbnails
body: <p>So I created an image carousel and then another carousel for its thumbnails since the thumbnails are different images from the ones in the carousel. Now my problem is when trying to make the images change by clicking the thumbnails. </p>
  
  <p>For the thumbnail function I'm using this plugin: <a href="https://github.com/gijsroge/OwlCarousel2-Thumbs" rel="nofollow noreferrer">https://github.com/gijsroge/OwlCarousel2-Thumbs</a></p>
  
  <p>Here's my setup :</p>
  
  <pre><code>&lt;div class="owl-carousel main-carousel" data-slider-id="1"&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
      &lt;div&gt;Your Content&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="owl-thumbs owl-carousel" data-slider-id="1"&gt;
      &lt;button class="owl-thumb-item"&gt;slide 1&lt;/button&gt;
      &lt;button class="owl-thumb-item"&gt;slide 2&lt;/button&gt;
      &lt;button class="owl-thumb-item"&gt;slide 3&lt;/button&gt;
      &lt;button class="owl-thumb-item"&gt;slide 4&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>