我们如何跳过 owl 轮播中的 display:none 项？

Question

谁能告诉我们如何跳过 owl 轮播中的 display:none 项？

我的html是这样的:-

<div id="owl-demo">
      <div class="item" id="image1"><img src="images/1.jpg" alt="Owl Image"></div>
      <div class="item" id="image2"><img src="images/2.jpg" alt="Owl Image"></div>
      <div class="item" id="image3"><img src="images/3.jpg" alt="Owl Image"></div>
      <div class="item" id="image4" style="display:none;"><img src="images/4.jpg" alt="Owl Image"></div>
      <div class="item" id="image5"><img src="images/5.jpg" alt="Owl Image"></div>
      <div class="item" id="image6"><img src="images/6.jpg" alt="Owl Image"></div>
      <div class="item" id="image7"><img src="images/7.jpg" alt="Owl Image"></div>
      <div class="item" id="image8"><img src="images/8.jpg" alt="Owl Image"></div>
    </div>

这是我的 jquery :-

<script>
    jQuery(document).ready(function() {

      jQuery("#owl-demo").owlCarousel({

          autoPlay: 3000, //Set AutoPlay to 3 seconds
          navigation : true,
          items : 4,
          itemsDesktop : [1199,3],
          itemsDesktopSmall : [979,3]
      });

      //jQuery("#owl-demo").data('owlCarousel').visibleItems;
    });
</script>

现在的问题是我不想显示 "display:none" 项。现在显示 none 项目没有出现，但最后出现了 space，不应该出现。

有人可以帮忙吗？

谢谢。

Answer 1

基本上你的方法不对。这种轮播首先解析 html 并生成自己的数据，然后开始循环播放。如果你定义一些 css 属性，你就破坏了轮播。所以你应该使用 OwlCarousel 的方法来添加和删除项目。

    //Initialize Plugin
    $(".owl-carousel").owlCarousel();
     
    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');
     
    //Manipulation methods.
    owl.addItem(htmlString [,targetPosition]);
    owl.removeItem(targetPosition);

希望听起来不错...

Answer 2

终于找到解决办法了。好吧，但不是 owl-carousel 方式。无法跳过 owl-carousel 中的 display:none 项。这是自定义解决方案。

我拿了新的 div，其中我得到了 lis 的集合，但我给了他们 hid class 所以所有都将被隐藏（hid = css class with display:none) 然后看我输入代码的javascript

Html 是这样的:-

<style type="text/css">
  .hid{display: none;}
</style>

<button onclick="reinitcarousel(1)">Tab 1</button><button onclick="reinitcarousel(2)">Tab 2</button>
    <div id="owl-demo">
      <div class="item im1" id="image1"><img src="images/1.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image2"><img src="images/2.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image3"><img src="images/3.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image4"><img src="images/4.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image5"><img src="images/5.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image6"><img src="images/6.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image7"><img src="images/7.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image8"><img src="images/8.jpg" alt="Owl Image"></div>
    </div>

    <div id="anotherdiv" style="display:none;">
      <div class="item hid im1" id="image1"><img src="images/1.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image2"><img src="images/2.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image3"><img src="images/3.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image4"><img src="images/4.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image5"><img src="images/5.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image6"><img src="images/6.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image7"><img src="images/7.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image8"><img src="images/8.jpg" alt="Owl Image"></div>
    </div>

脚本是这样的:-

<script>
jQuery('#owl-demo .hid').remove(); //At the time of page load, first remove all lis having hid class

//Then load the carousel
jQuery(document).ready(function() {
  jQuery("#owl-demo").owlCarousel({
      autoPlay: 3000, //Set AutoPlay to 3 seconds
      navigation : true,
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3],
      loop:true,
      rewindNav: false
  });
});
</script>

<script type="text/javascript">
  function reinitcarousel(v) //When you click on any tab
  {
    jQuery('#owl-demo').html(jQuery('#anotherdiv').html()); //Remove all lis in owl-demo div & place lis of anotherdiv div where all lis having class hid
    jQuery('#owl-demo .im'+v).removeClass('hid'); //Then again remove class hid having class .im(v) where v is a number
    jQuery('#owl-demo .hid').remove(); //Then remove all lis having class hid so our carousel will have only visible lis only

    jQuery("#owl-demo").data('owlCarousel').destroy(); //We need to destroy carousel first & then reinitialize like below
    jQuery("#owl-demo").owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        navigation : true,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        loop:true
    });
  }
</script>

完成:)

谢谢。

我们如何跳过 owl 轮播中的 display:none 项？

How can we skip display:none items in owl carousel?

owl-carousel