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

Question

Can anyone please tell how can we skip display:none items in owl carousel?

My html is like this :-

<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>

Here is my 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>

Now the issue is I do not want to display the "display:none" items. Now the display none items are not coming but at the end there comes a space, that should not come.

Any one can help please?

Thanks.

Answer 1

Finally I got the solution. Well but not the owl-carousel way. It's not possible to skip the display:none items in owl-carousel. Here is the custom solution.

I took the new div in which I got the collection of lis but I gave them hid class so all will be hidden(hid = css class with display:none) Then look at the javascript I put in code.

Html is like this :-

<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 is like this :-

<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>

Done :)

Thanks.