如何爲縮略圖創建純CSS/HTML滑塊的標題，無java/jquery

Question

我試圖創建一個滑塊，其中包含用於導航的圖像縮略圖。我還希望爲每張幻燈片創建一個標題，以便以其特定幻燈片出現和消失。

這是我的那一刻，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）。同樣，您也可以使用：

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

之後，這很容易。這條線對我來說是訣竅：

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

這是fiddle。