Responsive option not working

[CodeLearner21]

Hi, thanks for this module. I am trying to use responsive option as per the document here https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html but it is not working

my current option config sliderOptions = [{ dots: true, navigation: false, autoplay: false, loop: false, lazyLoad: true, nav: true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }];

[attapanbank]

same problem still trying to fix it, do you have solution now ?

[CodeLearner21]

Hello @attapanbank, here is my code I have created 'sliderOptions' object in the component sliderOptions = { margin: 20, dots: false, navigation: true, nav: true, navText:['<', '>'], autoplay: true, loop: false, lazyLoad: true, responsive:{ 0:{ items: 1 }, 600:{ items: 3 }, 1000:{ items: 4 } } }; and in html <owl-carousel [options]="sliderOptions" [items]="Items" [carouselClasses]="[ 'owl-theme', 'sliding', 'custom-class' ]"> Loop Items here </owl-carousel >

I hope this will help

[umakant]

Hi Guys, Below CSS will help you guys, .owl-prev:before, .owl-next:before { content: "\f053"; font-family: FontAwesome; position:relative; left: 0px !important; z-index: 999999 !important; width: 50px !important; height: 50px !important; right: auto !important; top:50% !important; }

.owl-next:before { content: "\f054"; font-family: FontAwesome; right: 0px !important; left: auto !important; } .owl-nav.disabled button { position: relative; height: 100px; }