search

getgrav / grav-plugin-shortcode-owl-carousel

Grav Shortcode Owl Carousel Plugin
https://getgrav.org
MIT License
11 stars 12 forks source link

Responsive Options ? #2

Open jonochong opened 7 years ago

jonochong commented 7 years ago

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 commented 7 years ago

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 commented 5 years ago

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 commented 4 years ago

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.