无法在页面上使用超过两个 owl carousel 2 缩略图

Question

我正在使用带有缩略图的 owl carosual2 滑块。如果任何用户单击缩略图，则滑块将滑动。现在我的问题是，我无法在单个页面上正确使用多个滑块。我的意思是，如果我点击第一个滑块缩略图，它会自动滑动第二个滑块缩略图。

我从这里找到了缩略图代码 http://jsfiddle.net/moyarich/mmtLcz6u/13/

var sync1 = $(".slider");
var sync2 = $(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
  //video:true,
  startPosition: 12,
  items: 1,
  loop: true,
  margin: 10,
  //autoplay:true,
  //autoplayTimeout:6000,
  mouseDrag: true,
  touchDrag: true,
  pullDrag: false,
  scrollPerPage: true,
  autoplayHoverPause: false,
  nav: false,
  dots: true
}).on('changed.owl.carousel', syncPosition);

function syncPosition(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);
  });

.sliderContent {
  margin-top: 40px;
}

.active.synced h2 {
  color: red;
}

<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.1/assets/owl.theme.default.css">

<div id="sync1" class="slider owl-carousel sliderContent">
  <div class="item">
    <h2>Test content 1</h2>
  </div>
  <div class="item">
    <h2>Test content 2</h2>
  </div>
  <div class="item">
    <h2>Test content 3</h2>
  </div>
</div>

<div id="sync2" class="navigation-thumbs owl-carousel">
  <div class="item">
    <h2>Thumnail 1</h2>
  </div>
  <div class="item">
    <h2>Thumnail 2</h2>
  </div>
  <div class="item">
    <h2>Thumnail 3</h2>
  </div>
</div>



<div id="sync3" class="slider owl-carousel sliderContent">
  <div class="item">
    <h2>Test content 4</h2>
  </div>
  <div class="item">
    <h2>Test content 5</h2>
  </div>
  <div class="item">
    <h2>Test content 6</h2>
  </div>
</div>

<div id="sync4" class="navigation-thumbs owl-carousel">
  <div class="item">
    <h2>Thumnail 4</h2>
  </div>
  <div class="item">
    <h2>Thumnail 5</h2>
  </div>
  <div class="item">
    <h2>Thumnail 6</h2>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/OwlCarousel2/2.2.1/owl.carousel.js"></script>

Answer 1

我已经更新了你的脚本，允许在单个页面上运行多个滑块，研究 Javascript 上的 for 循环和变量范围

演示网址：http://jsfiddle.net/HoangHieu/y8w9mrLa/8/

$('.sync').each(function(){ //Updated Here
	(function(_e){ //Updated Here
  var 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);

  function syncPosition(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: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.sync .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
.sync.item h1{
  font-size: 18px;
}
.sync .synced .item{
  background: #0c83e7;
}

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