html - 如何为带有缩略图的纯 CSS/HTML slider 创建标题，没有 java/jquery

Question

我正在尝试创建一个 slider ，其中包含您用来导航的图像缩略图。我还想为每张幻灯片创建一个标题，以随其特定幻灯片一起出现和消失。

这就是我目前拥有的，http://jsfiddle.net/yb02jzbq/

(来源于http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails)

如您所见，它只是缺少标题，如果您删除第一个 div 中的 id="d-slide1"，您将看到我想要实现的目标。我更希望字幕也遵循主要图像效果(如果比缩放更容易，你能让它从右向左滑入吗？)

Answer 1

抱歉回复晚了。我想我解决了你的问题。首先，我将您的标题更改为 class='d-slide' 以消除对 id 和计数器(对于唯一 ID)的依赖。此外，您可以使用:

而不是每个 ID 的大量行

.d-slide{visibility:hidden; display:inline-block;}

之后就很简单了。这条线对我有用:

.slider input[name='slide_switch']:checked+label+img+.d-slide { 
    visibility: visible; 
}

这是 fiddle .