Not Able To Use More Than Two Owl Carousel 2 Thumbnails On The Page

I am using owl carosual2 slider with thumbnail. If any user clicks on the thumbnail then the slider will slide. Now my issue is, I am not able to use more than one slider on my si

Solution 1:

I have updated your script that allow run multiple slider on single page, research about for loop and variable scope on Javascript

DEMO URL: http://jsfiddle.net/HoangHieu/y8w9mrLa/8/

$('.sync').each(function(){ //Updated Here
	(function(_e){ //Updated Herevar sync1 = $(_e).find(".slider");
  var sync2 = $(_e).find(".navigation-thumbs");

  var thumbnailItemClass = '.owl-item';

  var slides = sync1.owlCarousel({
    video:true,
    startPosition: 12,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:6000,
    autoplayHoverPause:false,
    nav: false,
    dots: true
  }).on('changed.owl.carousel', syncPosition);

  functionsyncPosition(el) {
    $owl_slider = $(this).data('owl.carousel');
    var loop = $owl_slider.options.loop;

    if(loop){
      var count = el.item.count-1;
      var current = Math.round(el.item.index - (el.item.count/2) - .5);
      if(current < 0) {
          current = count;
      }
      if(current > count) {
          current = 0;
      }
    }else{
      var current = el.item.index;
    }

    var owl_thumbnail = sync2.data('owl.carousel');
    var itemClass = "." + owl_thumbnail.options.itemClass;


    var thumbnailCurrentItem = sync2
    .find(itemClass)
    .removeClass("synced")
    .eq(current);

    thumbnailCurrentItem.addClass('synced');

    if (!thumbnailCurrentItem.hasClass('active')) {
      var duration = 300;
      sync2.trigger('to.owl.carousel',[current, duration, true]);
    }   
  }
  var thumbs = sync2.owlCarousel({
    startPosition: 12,
    items:4,
    loop:false,
    margin:10,
    autoplay:false,
    nav: false,
    dots: false,
    onInitialized: function (e) {
      var thumbnailCurrentItem =  $(e.target).find(thumbnailItemClass).eq(this._current);
      thumbnailCurrentItem.addClass('synced');
    },
  })
  .on('click', thumbnailItemClass, function(e) {
      e.preventDefault();
      var duration = 300;
      var itemIndex =  $(e.target).parents(thumbnailItemClass).index();
      sync1.trigger('to.owl.carousel',[itemIndex, duration, true]);
  }).on("changed.owl.carousel", function (el) {
    var number = el.item.index;
    $owl_slider = sync1.data('owl.carousel');
    $owl_slider.to(number, 100, true);
  });
  })(this);  //Updated Here
});

.sync.item{
    background: #0c83e7;
    padding: 80px0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.sync.item{
    background: #C9C9C9;
    padding: 10px0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
.sync.itemh1{
  font-size: 18px;
}
.sync.synced.item{
  background: #0c83e7;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.theme.default.css" /><scriptsrc="https://cdn.bootcss.com/OwlCarousel2/2.2.1/owl.carousel.js"></script><linkhref="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.carousel.css" /><divclass="sync"><divid="sync1"class="slider owl-carousel"><divclass="item"><h1>1</h1></div><divclass="item"><h1>2</h1></div><divclass="item"><h1>3</h1></div><divclass="item"><h1>4</h1></div><divclass="item"><h1>5</h1></div><divclass="item"><h1>6</h1></div><divclass="item"><h1>7</h1></div></div><divid="sync2"class="navigation-thumbs owl-carousel"><divclass="item"><h1>1</h1></div><divclass="item"><h1>2</h1></div><divclass="item"><h1>3</h1></div><divclass="item"><h1>4</h1></div><divclass="item"><h1>5</h1></div><divclass="item"><h1>6</h1></div><divclass="item"><h1>7</h1></div></div></div><divclass="sync"><divid="sync3"class="slider owl-carousel"><divclass="item"><h1>1</h1></div><divclass="item"><h1>2</h1></div><divclass="item"><h1>3</h1></div><divclass="item"><h1>4</h1></div><divclass="item"><h1>5</h1></div><divclass="item"><h1>6</h1></div><divclass="item"><h1>7</h1></div></div><divid="sync4"class="navigation-thumbs owl-carousel"><divclass="item"><h1>1</h1></div><divclass="item"><h1>2</h1></div><divclass="item"><h1>3</h1></div><divclass="item"><h1>4</h1></div><divclass="item"><h1>5</h1></div><divclass="item"><h1>6</h1></div><divclass="item"><h1>7</h1></div></div></div>