Responsive width slider

remaye's Avatar

remaye

25 Feb, 2017 04:42 PM

Hi, I can't get the slider resize responsively to the browser's width like here : http://www.ecobat77.fr/etancheite
between 960 and 640 pixels width (this is a Flexslider in this case).

In my use case, mages will all have the same size, filling entirely the slider. I want the slider to resize in height according to the images ratio and I don't want the images to be cropped like in the "full width slider template" (http://dimsemenov.com/plugins/royal-slider/full-width/)
I don't need any nearby or margin effect.

I'm integrating the RS through the Drupal RoyalSlider module and I can't find out how to combine module settings and css to achieve that. I'm also suspecting I could need some JS. Can you please give me some clue, or an exemple if available...

Thanks.

  1. Support Staff 1 Posted by Dmitry Semenov on 25 Feb, 2017 05:58 PM

    Dmitry Semenov's Avatar
  2. 2 Posted by remaye on 25 Feb, 2017 11:19 PM

    remaye's Avatar

    Thanks for you quick answer.

    I finally made it work the way you pointed for just responsively resize the slider according to the container width (for some reason I also had to specify !important to .royalslider "width: 100%" CSS rule).

    But in order to resize the images according to the slider size I also had to specify the ImgWidth and ImgHeight options (I guess this is what the module interface did : see attached file).
    Otherwise the images remained cropped (masked) by the slider dimension instead of being resized (see attached files).

    Maybe it was obvious, I'm just reporting it in case someone else is looking for the same use case.
    Thanks again for your help.

  3. remaye closed this discussion on 03 Mar, 2017 04:14 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac