如何使此图像滑块响应？

Question

我在网上找到了一个很棒的纯 CSS 滑块，它完全符合我的需要，但滑块没有响应。我希望它根据视口大小调整大小，这样如果我将浏览器拖动得更小，滑块也会随之调整得更小。我尝试了来自不同网站的很多建议，但 none 有效.我能做什么？

#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>

Answer 1

如果您熟悉 break-points 和 media queries 的概念，您可以很容易地实现响应。

您可以像这样使用媒体查询：

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

当屏幕小于 600px 时，它将向正文应用背景色。通过在所有最常见的断点上重复此操作（请参阅 bootstrap 断点），您将能够以非常有效的方式设置纯 css 滑块的样式。

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

Answer 2

试试这个代码，它会对你有帮助

让你的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>

告诉我这是否适合你

Answer 3

只需在 #slider 上添加 max-width:100vw; 即可确保滑块的宽度不会在您的 body 上溢出。

演示

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

#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>

如何使此图像滑块响应？

How do I make this image slider responsive?

css

responsive

image-slider

演示