Html 带有图像和标题的幻灯片框的CSS

我正要为我目前正在制作的一个网站制作一个幻灯片，但我被样式/布局卡住了。我知道已经有在线阅读的幻灯片，但我想制作一个简洁明了的幻灯片

图像计划从右向左移动，而不是淡入淡出效果。我也愿意使用一点JS，以保持CSS更干净（不过会使用CSS转换）

我目前的状况：

这似乎是工作，因为是（没有真正的测试，虽然），但我需要在图片下的标题以及。我实现这一目标的第一个想法失败了：

滑块{
最大宽度：60%；
溢出：隐藏；
}
.slider.img包装器{
显示器：flex；
}
.slider.img wrapper>div{
位置：相对位置；
}
.滑块img{
宽度：100%；
身高：100%；
}
.slider.caption{
位置：绝对位置；
底部：0；
宽度：100%；
背景：rgba（0,0,0,0.6）；
颜色：#fff；
}

一些标题文本
另一个标题。。
另一个标题。。
另一个标题。。

您是否在网页上使用引导？否。还好，我自己也找到了一个简单的解决办法。我只需要给img包装一个

宽度：400%。如果滑块中的图像量是可变的，则这不是理想的解决方案，但在我的情况下，这是一个常数。：）或者，您可以在图像加载easy jquery指令并应用于css后计算宽度。