使用flex/css和javascript构建响应性滑块

我正在尝试建立一个响应灵活的滑块。我有一个容器，它是柔性的，里面的物品要垂直和水平居中。它应该一次显示一个项目，而其他项目则在屏幕外。目前它同时显示所有项目。如何一次显示一个项目。我好像到不了那里。如果我能想出如何在屏幕外显示一个主要项目&其余的，我想我能想出其余的。非常感谢您的帮助。以下是我正在研究的内容的链接：

http://7.engineroomdm.com/exodus/home.htm

代码如下：

正文{
保证金：0；
}
.dj滑块{
背景图片：url（'images/slidebackgrnd.jpg'）；
填充：50px；
最小高度：300px；
背景尺寸：封面；
显示器：flex；
证明内容：中心；
溢出：隐藏；
flexwrap:nowrap；
-webkit溢出滚动：触摸；
}
.dj幻灯片图像{
最大宽度：100%；
高度：自动；
}
.dj幻灯片{}
.dj幻灯片：非（：第一个孩子）{
/*左：0*/
}

---

我能想到的最简单的方法是将每张幻灯片制作成一个flex容器，这样就可以使图像居中

此外，由于

幻灯片

元素也是弹性项，它们的

弹性收缩

需要设置为

0

，否则它们不会保持100%宽

堆栈片段

正文{
保证金：0；
}
.dj滑块{
背景图片：url（'images/slidebackgrnd.jpg'）；
最小高度：200px；
背景尺寸：封面；
显示器：flex；
溢出：隐藏；
-webkit溢出滚动：触摸；
边框：1px纯黑；
}
.dj幻灯片图像{
最大宽度：100%；
高度：自动；
}
.dj幻灯片{
宽度：计算（100%-100px）；/*增加，全宽-边距*/
flex收缩：0；/*已添加，因此不会收缩*/
边框：1px纯红；/*添加，用于演示*/
边距：20px 50px；/*已添加，而不是在父级上填充*/
显示：flex；/*已添加*/
对齐项目：居中；/*已添加*/
对齐内容：中心；/*已添加*/
动画：滑动10秒，无限大；
}
@关键帧滑动它{
0%{transform:translateX（0）；}
25%{transform:translateX（计算（-100%-100px））；}
50%{transform:translateX（计算（-200%-200px））；}
100%{transform:translateX（计算（-300%-300px））；}
}

请阅读并按照说明。。。因为某种原因它不让我。。。找到一个解决方法我想知道你使用flex slider是否有特定的原因。我建议使用滑头。这是一款反应灵敏、易于使用的滑块。我被困在一个限制性的cms:\哇，老兄。。。太棒了。但是有两个问题。。。css允许计算？这对我来说是新的，所以如果是的话，太好了！我学到了一些新东西：）。2） 这会缩小到屏幕大小吗（响应性）？@Damien 1：是的，在过去的6-7年里，你已经能够用CSS进行计算了：。。。2.是的，它可以缩放，因此您可以在元素上使用百分比，并且

translateX（-100%）

使用百分比，它是元素自己的宽度，不管它是什么，换句话说是完全动态的。非常有趣。。。让我试一试：）！您更改最小高度是有原因的，还是只是为了演示目的？@Damien更改高度是为了演示目的，是为了适应代码段窗口，而不是“整页”