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

Question

我正要为我目前正在制作的网站制作幻灯片，但我仍然坚持造型/布局。我知道已经有在线阅读的幻灯片，但我想让自己干净简单。

图像计划从右向左移动，而不是淡入淡出效果。我也愿意使用一点JS来保持CSS清洁（虽然会使用CSS转换）。

我目前的状态：https://jsfiddle.net/8c3ods5o/

这似乎按原样工作（虽然没有经过测试），但我也需要图片下的字幕。我的第一个想法是实现这一点，虽然失败了：https://jsfiddle.net/8c3ods5o/2/

＆＃13;

＆＃13;

.slider {
    max-width: 60%;
    overflow: hidden;
}

.slider .img-wrapper {
    display: flex;
}

.slider .img-wrapper > div {
    position: relative;
}

.slider img {
    width: 100%;
    height: 100%;
}

.slider .caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0, 0.6);
    color: #fff;
}

＆＃13;

<div class="screenshots slider">
    <div class="img-wrapper">
        <div>
            <img src="http://lorempixel.com/640/360/">
            <span class="caption">some caption text</span>
        </div>
        <div>
            <img src="http://lorempixel.com/640/360/">
            <span class="caption">another caption..</span>
        </div>
        <div>
            <img src="http://lorempixel.com/640/360/">
            <span class="caption">another caption..</span>
        </div>
        <div>
            <img src="http://lorempixel.com/640/360/">
            <span class="caption">another caption..</span>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;