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.
How can we skip the items with display:none in owl carousel?
Reply With Quote
Yes I am going to check for updated version & let you know the result 
Bookmarks