Responsive full-width cssSlider - keep height until breakpoint

Question

I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.

I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.

I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500: https://www.easterisland.travel/

I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.

Any clues? Thank you!

Answer 1

For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.

Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/

Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!

Try replacing their media query, something like this:

@media only screen and (max-width: 800px) {
    .csslider1, .csslider1 > ul {
        height: 75vh; max-height:450px;
    }
}