如何为纯CSS / HTML滑块创建带缩略图的字幕，没有java / jquery [英] How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

问题描述

我正在尝试创建一个具有您用于导航的图片缩略图的滑块。

I'm trying to create a slider that has image thumbnails that you use to navigate with. I also want to create a caption for each slide, to appear and disappear with their specific slides.

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

This is what I have at the moment, http://jsfiddle.net/yb02jzbq/

（源自 http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized - Thumbnails ）

如果您删除了 id =d-slide1在第一个div之一，你会看到我想实现的。我更喜欢如果字幕也遵循主要的图像效果（如果比缩放更容易，你能让它从右到左滑动吗？）

As you can see it's just missing the captions, if you remove the id="d-slide1" in one of the first divs, you will see what I'm trying to achieve. I'd prefer if the captions also followed the main images effects (if easier than scaling, could you make it slide in from right to left?)

推荐答案

对不起，迟到的回复。我想我解决了你的问题。首先，我将您的标题更改为 class ='d-slide'，以便删除对ID和计数器（对于唯一ID）的依赖。而不是每个ID的gazillion行，你使用：

Sorry for the late response. I think I solved your problem. First I changed your titles to class='d-slide' in order to remove dependency on id's and counters(for unique IDs). Also instead of a gazillion lines for each ID, you use:

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

这行对我来说是个技巧：

After that's it's easy. This line does the trick for me:

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

这是小提琴。

这篇关于如何为纯CSS / HTML滑块创建带缩略图的字幕，没有java / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！