多张幻灯片，没有广泛的剪切和粘贴。

Question

我有这个幻灯片(我已经修改了一些代码原源)

下面是一个jsfiddle链接：

全源

CSS看起来是硬编码的，所以如果我试图在同一个页面上显示两个不同的幻灯片，那么我就会遇到第二个幻灯片中的按钮控制第一个幻灯片的问题。

有什么方法我可以修改东西，以允许多个单独的幻灯片显示在一个网页上？

HTML片段：

<div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>

CSS片段：

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

Answer 1

你使用的滑块是我在2012年使用的第一个滑块。很酷。但是，我强烈建议你查看Responsiveslides.js -它是超级棒，我使用它时，我需要一个滑块。它可能需要更多的造型，取决于你的情况，但实际上是线型，我已经检查过了-它的滑块是足够具体的，以不踩在另一个。以两个滑块为例的小提琴：

HTML

非常简单的标记。不管你想把什么都塞进清单里。

<ul class="rslides">
    <li><img src="http://placekitten.com/300/150-1" alt="" /></li>
    <li><img src="http://placekitten.com/300/150-2" alt="" /></li>
    <li><img src="http://placekitten.com/300/150-3" alt="" /></li>
</ul>

CSS

基本css也很简单--还有一些主题。这样你就完全控制了

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
}