我们如何跳过显示：猫头鹰轮播中没有项目？

终于我找到了解决方案。好吧，但不是猫头鹰轮播方式。不可能跳过显示：猫头鹰轮播中没有项目。这是自定义解决方案。

我进入了一个新的div，在其中我得到了lis的集合，但我给了他们hid类，所以它们都将被隐藏（hid =具有display：none的css类），然后查看我放入代码中的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>

完毕 ：）

谢谢。