javascript - How to view only 3 items on Owl Slider instead of 5 -
i trying implement owl slider in website , working problem owl slider show 5 items on 1 slide default need make 3 items display per slide instead of 5.
i have tried add below code available on official website not working me please let me know how fix.
jquery(document).ready(function(){ jquery('.owl-demo').owlcarousel({ margin: 0, responsiveclass: true, smartspeed: 500, dots: ($(".owl-carousel .item").length > 1) ? true: false, loop:($(".owl-carousel .item").length > 1) ? true: false, responsive: { 0: { items: 1, }, 1140: { items: 3, }, 1110: { items: 3, } } })
thanks
i have similar problem, , problem below:
- i import dynamic css style file;
- when document ready, dynamic file have not loaded, owl inited;
- and dynamic file loaded, dynamic file's style resize owl-carousel container, owl's responsive not triggered;
you may should init owl when style ready.
window.addeventlistener("load", function () { jquery('.owl-demo').owlcarousel({ margin: 0, responsiveclass: true, smartspeed: 500, dots: ($(".owl-carousel .item").length > 1) ? true : false, loop: ($(".owl-carousel .item").length > 1) ? true : false, responsive: { 0: { items: 1, }, 1140: { items: 3, }, 1110: { items: 3, } } }, false);
another wordaround below:
settimeout(function () { $('.owl-carousel').trigger('refresh.owl.carousel'); }, 500);
Comments
Post a Comment