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

1 Attachment(s)

Hello Everyone,

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

My html is like this :-

HTML Code:

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

Code:

<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. Display none items are not coming but at the end there comes a empty space, that should not come. Please check the attachment with the demo.

Please note that I do not want to remove items like this :-

$("#owl-demo").data('owlCarousel').removeItem(3);

What I want is the items with display:none or class 'hidden' should not be included in the slider at the time of page load. (This is the primary thing I need)

Another thing I want is after page is loaded - there will be a button on page. When we click that button - certain lis will become hidden (display:none or class - hidden) & certain will become visible (class hidden will be removed or display:none will be removed) in that case also slider should be refreshed & show only visible items.

Will that be possible with owl carousel? or I need to change the slider? If I need to change then which slider will be helpful?

Please check the attached demo. (Please add any 8 images & name it 1.jpg, 2.jpg like that, because of upload file size issue I removed those images)

Any one can help please?

Thanks.

Hello Everyone,

Anyone having any solution on this?

Thanks.

Hi Ericlarson,

Thank you for replying :) Yes I am going to check for updated version & let you know the result :)

Thanks again.

Technically speaking, you cannot. You can make it act like that the first time, then setup convenient functions to add or remove items from the slider in place (keeping current order and position of the slider) via id once it's running. Here's a demo sliderdemo.html, use all of your other files as is:

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="owl.carousel.css" rel="stylesheet"> <style type="text/css"> #owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 100%; height: auto; } #theid { width: 4em; margin: 0 5px 0 5px; } </style> </head> <body> <form action="" onsubmit="return false"> <button id="remover">Remove</button><input type="text" id="theid" value="image7" pattern="^image\d+$"><button id="adder">Add</button> <span id="numitems"></span></form> <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> <script src="jquery-1.9.1.min.js"></script> <script src="owl.carousel.js"></script> <script> jQuery(function($){ function removeOwl(id){ if(!(id = $('#' + id, this.$elem)).length){return;} curidx = this.visibleItems[0]; this.removeItem(this.$userItems.index(id)); this.jumpTo(curidx < this.itemsAmount? curidx : --curidx); this.$statusel.html($('.item', this.$owlWrapper).length + ' items'); } function addOwl(id){ var num = +id.split('e')[1], ims = this.$userItems, ind = ims.length, div; if($('#' + id, this.$elem).length || !(id = $('#' + id, this.stable)).length){return;} curidx = this.visibleItems[0]; while(--ind > -1){ if(+ims.eq(ind).attr('id').split('e')[1] < num){ break; } } this.addItem((div = $('<div/>')).append(id.clone(true)).html(), ++ind); div.remove(); this.jumpTo(curidx <= ind? curidx : ++curidx); this.$statusel.html(this.itemsAmount + ' items'); } var $owlstable = $("#owl-demo").clone(true).attr('id', '').find('div').css({display: ''}).removeClass('hidden').end(), $owl = $("#owl-demo").find('div').not(':visible').remove().end().end().owlCarousel({ autoPlay: 3000, //Set AutoPlay to 3 seconds navigation : true, items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3], $statusel : $('#numitems'), afterInit : function(){ this.addOwl = addOwl; this.removeOwl = removeOwl; this.stable = $owlstable; this.userOptions.$statusel = this.userOptions.$statusel || $('<div/>'); this.$statusel = this.userOptions.$statusel.html($('.item', this.$owlWrapper).length + ' items'); var inst = this; $.fn.extend({ owlRemove: function(thisowl){ thisowl = thisowl && thisowl.$elem? thisowl : thisowl && (thisowl = $(thisowl).data('owlCarousel'))? thisowl : inst; this.each(function(i, d){ thisowl.removeOwl(d.id); }); return this; }, owlAdd: function(thisowl){ var els, id; thisowl = thisowl && thisowl.$elem? thisowl : thisowl && (thisowl = $(thisowl).data('owlCarousel'))? thisowl : inst; $(this.selector, thisowl.stable).each(function(i, d){ thisowl.addOwl((id = d.id)); els = els? els.add('#' + id, thisowl.$elem) : $('#' + id, thisowl.$elem); }); return els; } }); } }), owldata = $owl.data('owlCarousel'), curidx; $('#remover').click(function(){owldata.removeOwl($('#theid').val());}); $('#adder').click(function(){owldata.addOwl($('#theid').val());}); }); </script> </body> </html>

If you want to use the new addOwl or removeOwl functions in independent code, you could do, for example:

Code:

$("#owl-demo").data('owlCarousel').addOwl('image4');

or:

Code:

$("#owl-demo").data('owlCarousel').removeOwl('image8');

If necessary or desired, a jQuery function is available too:

Code:

$('#image3').owlRemove();

or remove more than one:

Code:

$('#image3, #image7').owlRemove();

or add more than one:

Code:

$('#image3, #image7').owlAdd();

or add all that are not there:

Code:

$('.item').owlAdd();

Any questions, feel free to ask.

NOTES: This all depends upon the current sequential id naming convention of "image1", "image2", and so on, and upon the class of "item" for each item division. Best in most cases to first add what you want to add and then take away what you don't want. If an item is already removed and you try to remove it again, it will be ignored. Likewise, if you try to add an item already in the slider, that command will also be ignored. Other items in the same command will still be either removed or added if they qualify. If an id or other selector is used with these commands that doesn't correspond to an actual item from the original markup, it will also be ignored. These last jQuery type methods can be used on multiple instances of owl sliders on a page, but that's a little more involved. If that's required - ask about it.

Hello jscheuer1,

Thank you very much for your great help :)

Will give it a try & let you know. Meanwhile I will also post what I did :)

Thanks again :)