How do I make this image slider responsive?

Question

I found a great pure CSS slider online that does exactly what I need but the slider isn't responsive. I'd like it to resize based on the viewport size, so that if I drag the browser smaller, the slider resizes smaller along with it.. I've tried lots of suggestions from different websites but none of them worked. What can I do?

#slider {
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

<div id="slider">
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
                    <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>

Actually, can you make that a full answer so I can vote properly for it? You deserve full credit! — Hideto, Aug 20 '21 at 04:14

score 1 · Accepted Answer · answered Aug 20 '21 at 07:55

Just add max-width:100vw; on #slider to make sure that the width of the slider does not overflow on your body.

DEMO

body{
  margin:0; /* ADDED for SNIPPET Stackoverflow */
}

#slider {
    width: 952px;
    height: 409px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    
    max-width:100vw;              /* ADDED */
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}

<div id="slider">
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
  <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>

Perfect. This caused me to find one other problem that maybe you could help with? When I size the page down, the slider resizes as desired but the div paragraph below it doesn't follow and stuck stuck against the bottom of it. The slider pulls away and the div stays where it is. I've tried playing with the positioning but I can't seem to get it right without screwing up the slider. Any ideas? Test page: http://www.cafenocturne.com/RackInspections/index.html — Hideto, Aug 21 '21 at 13:11
Sorry for the delay, but I dont see the problem you describe — MaxiGui, Aug 22 '21 at 16:06

score 0 · Answer 2 · answered Aug 19 '21 at 08:31

0

If you are familiar with the concepts of break-points and media queries you can make this responsive pretty easily.

You can use media-queries like this:

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Which will apply a background-color to the body when the screen is smaller than 600px. By repeating this on all most common breakpoints (see bootstrap breakpoints) you will be able to style your pure css slider in a pretty efficient way.

https://getbootstrap.com/docs/5.0/layout/breakpoints/

answered Aug 19 '21 at 08:31

mikegross

1,674
2
12
27

I was hoping to do it without needing to use breakpoints and have it work natively/naturally no matter the viewport size. I also realize that after editing it, I can see my work on my home machine but no longer on the production server. What am I doing wrong to cause that? Production URL: https://www.cafenocturne.com/RackInspections/index.html – Hideto Aug 19 '21 at 10:20

score 0 · Answer 3 · answered Aug 19 '21 at 08:31

Try this code it will help you

Make your Width:100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #slider {
    width: 100%;
  
    height: 300px;
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    animation: slide 20s infinite;
    opacity: 0;
}

#slider > div:nth-child(2) {
    animation-delay: 5s;
}

#slider > div:nth-child(3) {
    animation-delay: 10s;
}

#slider > div:nth-child(4) {
    animation-delay: 15s;
}

#slider > div:nth-child(5) {
    animation-delay: 20s;
}

@keyframes slide {
    10% {
        opacity: 1;
        }
    20% {
        opacity: 1;
        }
    30% {
        opacity: 1;
        }
    40% {
        opacity: 0;
        }
}
    </style>
    <div id="slider">
        <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
        <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
        <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
        <div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
</body>
</html>

Let me know if this will work for you

How do I make this image slider responsive?

3 Answers3

DEMO