Lightslider - responsive Settings

Hello there,

i have a problem using the lightslider plugin in my project. The slider should change it’s size depending on the viewport size of the browser. In the original jquery plugin I already found an option which might allow setting the height based on the width of the viewport here .

      $(document).ready(function() {
        $('#responsive').lightSlider({
            item:4,
            loop:false,
            slideMove:2,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed:600,
            responsive : [
                {
                    breakpoint:800,
                    settings: {
                        item:3,
                        slideMove:1,
                        slideMargin:6,
                      }
                }, 
                {
                    breakpoint:480,
                    settings: {
                        item:2,
                        slideMove:1
                      }
                }
            ]
        });  
      });

Is there any way of doing this in grav?

Best regards,
Michael Gollmer

Here’s my earlier thread about this (no solution so far): https://getgrav.org/forum#!/plugin-development:lightslider-responsiveness

Thank you for sharing your post. It’s a shame. I hoped to get along with this. I really need this settings.

I’ve not had time to look at this i’m afraid. Any PR to improve lightslider to support this would be most welcome.

Hello rhusker,
should be a simple solution for this problem. The included lightslider version is already able to work with the “responsive” param. Is it enough to juste change the lightslider template, so it can handle the param via settings.yaml? I’m thinking about making a PR to this one, but don’t want to mess things up.

Regards,
Michael

@mgsys, yes it should be as simple as handling the passed in responsive param properly.