css - 如何创建具有相对位置和绝对位置的响应式 slider ？

Question

我正在尝试构建简单的淡入淡出 slider 。 如何同时拥有响应式幻灯片和堆叠？也许这个问题有另一种解决方案(我的意思是:不使用相对位置/绝对位置)？

我使用具有“相对位置”的父元素和具有“绝对位置”的幻灯片将它们一个堆叠在另一个顶部(然后我可以使用不透明度在幻灯片之间淡入淡出)。问题是幻灯片没有响应。如果我从父元素中删除“相对位置”，幻灯片会调整大小，但它们会忽略父元素并填满整个屏幕。

     body {
        width: 960px;
        margin: 0 auto;
     }
     .slides {
        position: relative;
      }
     .slides li img {
       width: 100%;
       position:absolute;
       height: auto;
       top:0;
       left:0;
     }

    <div id="microslider">
            <ul class="slides">
                <li><img src="slides/slide-1.jpg" alt=""></li>
                <li><img src="slides/slide-2.jpg" alt=""></li>
                <li><img src="slides/slide-3.jpg" alt=""></li>
                <li><img src="slides/slide-4.jpg" alt=""></li>
            </ul>
        </div>

Answer 1

1. 为了创建幻灯片，您可以将此 jsfiddles 作为引用:jsfiddle.net/foffka/c0wjfd6j和 jsfiddle.net/kidino/qsyxR

2. 关于'responsive'这个主题，有几种可能性，取决于你想要什么。

   • 我建议您为 .slides li 设置宽度。
   • 你已经写了 width: 100%; height: auto; 在 .slides li img 中。这意味着图像将适应其父级宽度的 100%。例如，如果将 li 设置为 300px，则每张图片都会适应该值。
   • 如果您希望每个图像的宽度为设备宽度的 50%，请在 li 选择器中设置 50vw 并查看调整页面大小时会发生什么。
   • 如果您希望在移动设备(例如 480 像素或更小)中每张图片都占设备宽度的 100%，您可以设置:

    @media (max-width: 480px) {
        .slides li {
            width: 100vw;
        }
    }

您还可以使用 min-width 和 max-width 值。等等。

希望对您有所帮助。