Responsive Options ?

[jonochong]

Hi,

I'm trying to get the carousel to be responsive. 6 visible on larger screens and only 1 on smaller (mobile). How am I supposed to add responsive options/breakpoints to the carousel ?

i.e., like with the non-shortcode plugin,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}

Thank you :)

[leonidboykov]

You can provide responsive options to the shortcode as well.

[owl-carousel ...other-settings... responsive={0:{items:1},600:{items:3},1000:{items:5}}]
<!-- images -->
[/owl-carousel]

[glopes]

Since last update this seems to be broken. This worked until I updated yesterday:
[owl-carousel items=1 margin=20 loop=true autoplay=true autoplayHoverPause=true nav=true responsive={0:{items:1},600:{items:2},1000:{items:3}}]
Now Owl-Carousel isn´t shown anymore. :(
Has the syntax changed for responsive shortcode or is there something I have to setup somewhere else to get it working again?
Without responsive shortcode [owl-carousel items=3 margin=20 loop=true autoplay=true autoplayHoverPause=true nav=true responsive] Owl-Carousel starts again, but unfortunately it doesn´t look the same.

[miraculli]

Yes. I can confirm, that this is broken since release 1.0.2.
It looks like converting the shortcode paramters like margin, nav to JSON-Input for the .owlCarousel()

Here the non working example by passing a JSON-Object to the shortcode responsive param like it worked with release 1.0.1:

[owl-carousel margin=10 loop=true autoplayHoverPause=true nav=true responsive="{0 :{items:1, autoplay:true}, 480 :{items:2, autoplay:false}}"]

with release 1.0.2 it gets renderd to this and throws a jQuery exception:

$(document).ready(function(){ $("#owl-5f865aa028").owlCarousel({"margin":10,"loop":"true","autoplayHoverPause":"true","nav":"true","responsive":"{0 :{items:1, autoplay:true}, 480 :{items:2, autoplay:false}}"}); });

Removing the nested JSON-Object from the shortcode-params works fine but there is no way to get the responsive behavour of owl-carousel with this shortcode-plugin.