CODEWITHSUNDEEP
cssresponsive-designslider
Marcus Edensky
Marcus Edensky

Reputation: 944

Responsive full-width cssSlider - keep height until breakpoint

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!

Upvotes: 13

Views: 795

Answers (2)

Marcus Edensky
Marcus Edensky

Reputation: 944

In the end, I found this to be the correct code:

@media only screen and (max-width: 1500px) {
    .csslider1,
    .csslider1 > ul {
        height: auto;
    }
}

I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.

Upvotes: 0

Jen
Jen

Reputation: 1733

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;
    }
}

Upvotes: 2

Related Questions