如何创建相对和绝对位置的响应式滑块？

Question

我正在尝试构建简单的fadeIn-Out滑块。 如何同时放置响应式幻灯片和堆叠？对于这个问题，也许还有另一种解决方案（我的意思是：不使用相对位置/绝对位置）？

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

walk(.x=d1$p,.f=gridExtra::grid.arrange)

Answer 1

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

2. 关于“响应”的主题，有几种可能性，取决于您想要的东西。

   • 我建议您将宽度设置为.slides li。
   • 您已经在width: 100%; height: auto;内写了.slides li img。这意味着图像将适应其父对象宽度的100％。例如，如果您将li设置为300px，则每个图像都将适应该值。
   • 如果希望每个图像的宽度为设备宽度的50％，请在50vw选择器内设置li，然后查看调整页面大小时会发生什么。
   • 如果您希望在移动设备中（例如480px及以下）每个图像都具有设备宽度的100％，则可以设置：

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

您还可以使用最小宽度和最大宽度值。依此类推。

希望有帮助。