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

Posted 2023-03-29

【中文标题】无法在页面上使用超过两个 owl carousel 2 缩略图

【英文标题】：Not able to use more than two owl carousel 2 thumbnails on the page

【发布时间】：2020-04-13 14:37:25

【问题描述】：

我正在使用带有缩略图的 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>

【参考方案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>

【讨论】：

给我一些时间用我的代码检查和实现你的答案