Responsive Images on Slider - Please Vote!

DaveOzric
935 Posts
DaveOzric posted this 19 October 2016

Hello, I am really hoping to start using your slider more to maintain compatibility and work smoothly without conflicts.

However I am quickly seeing it's not user friendly in regards to being responsive. You have elected to make the images background images which does not work for me.

There are typically 2 scenarios with a slider. Someone who wants a large image that is a background image or someone who wants an image that is seen at all screen sizes but just smaller. Just like a normal content image that sizes down to the screen width and container size. Please add the ability to set the slider to either cover or contain (however it should be phrased) so it works for both types of situations.

Thank you

Hello, I am really hoping to start using your slider more to maintain compatibility and work smoothly without conflicts. However I am quickly seeing it's not user friendly in regards to being responsive. You have elected to make the images background images which does not work for me. There are typically 2 scenarios with a slider. Someone who wants a large image that is a background image or someone who wants an image that is seen at all screen sizes but just smaller. Just like a normal content image that sizes down to the screen width and container size. Please add the ability to set the slider to either cover or contain (however it should be phrased) so it works for both types of situations. Thank you
slider responsive
Vote to pay developers attention to this features or issue.
21 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 16 January 2017

Hi,

how exactly do I target this slider so I can add the additional media queries?

All sliders have bd-slider class. This general class. Each slider has individual class, e.g. bd-slider-2. You can find the class using any browser developer tool.
Individual Slides have general bd-slide and individual bd-slide-8 classes.

The main problem is that the elements inside Slide are positioned absolutely. This allows you to move the elements in Themler and position them in the way you want. But in this case these elements do not affect the slider height. They cannot stretch the Slider and Slider cannot shrink on small screens and you need to set fixed Slider height. This causes different display problems in responsive modes.
However, if you place the Image control with long enough image and change its positioning to "No Align" you will be able to affect the Slider height by this image. Example Section attached.

Please note that background image depends on the control to which this image is assigned. Background image cannot affect the size of the container. To not crop it or stretch om small screens you should use "contain" background image size. But in this case you may see the empty space if the size of the image does not mach the size of the slide. Just like with any element like empty container.

Thank you,
Olivia

Hi, > how exactly do I target this slider so I can add the additional media queries? All sliders have `bd-slider` class. This general class. Each slider has individual class, e.g. `bd-slider-2`. You can find the class using any browser developer tool. Individual Slides have general `bd-slide` and individual `bd-slide-8` classes. The main problem is that the elements inside Slide are positioned absolutely. This allows you to move the elements in Themler and position them in the way you want. But in this case these elements do not affect the slider height. They cannot stretch the Slider and Slider cannot shrink on small screens and you need to set fixed Slider height. This causes different display problems in responsive modes. However, if you place the **Image control** with long enough image and change its positioning to "No Align" you will be able to affect the Slider height by this image. Example Section attached. Please note that background image depends on the control to which this image is assigned. Background image cannot affect the size of the container. To not crop it or stretch om small screens you should use "contain" background image size. But in this case you may see the empty space if the size of the image does not mach the size of the slide. Just like with any element like empty container. Thank you, Olivia
slider-with-image.zip
You must log in or register to leave comments