How do I make this image slider responsive?

Question

How do I make this image slider responsive?

668 views Asked by Hideto At 19 August 2021 at 08:25

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>

Original Q&A

There are 3 answers

mikegross On 19 August 2021 at 08:31

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/

AudioBubble On 19 August 2021 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

**MaxiGui** · Accepted Answer · 2021-08-20T07:55:40+00:00

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>

TechQA.

How do I make this image slider responsive?

There are 3 answers

DEMO

Related Questions in CSS

Related Questions in RESPONSIVE

Related Questions in IMAGE-SLIDER

Popular Questions

Popular Tags

Trending Questions