Descripton
Having hundreds items sounds crazy huh? Not for Owl! Have a look into source code of this demo page.
lazyContent:true option activate special Owl DOM structure to handle thousands items.
Unfortunately not all options are avaialble in this setup. This is a small trade off for much better and faster mobile browsing experience.
Also this structure can be mixed with normal structure. You need to load website on particular window size to see effect
You also may find that original content provided here is taken out. Owl keep it inside this.dom.$content object.
Strongly recommended to use on small breakpoints if you have more than ~10/20 items and more than 1 instance of Owl on same page
Also see lazyContent + Ajax + JSON demo.
Requirements:
- At least 3 times more items than currently visible numbers of slides (so if you set items:3 then you have to have at least 9 items in DOM)
Trade offs:
- Infinity loop is set to true and non-loop carousel is not available within this structure yet. Owl will be in loop state no matter how you set {loop} option.
- Dots are disabled due to large number of items but informations about current item/ all items are still available to you (see info callback)
- Merge items and autoWidth is unavailble.
- goTo method doesnt work. Use jumpTo instead.
- URLhashListener doesnt work
lazyContent structure needs to be tested.
//Javascript
$('.owl-carousel').owlCarousel({
nav:true,
margin:10,
lazyLoad:true,
lazyContent:true,
info: getInfo,
responsive:{
0:{
items:1
},
480:{
items:2
},
960:{
items:3
}
}
});