Question

我有这个幻灯片（我已经修改了一些代码origional source）

这是一个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 - 它非常棒，我随时都需要滑块使用它。根据你的情况，它可能需要更多的样式，但它真的是可以打开的，而且我已经检查了 - 它的滑块非常具体，不会相互踩踏。 a fiddle with 2 sliders as an example:

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%;
}

多个幻灯片放映没有大量的剪切和粘贴

1 个答案:

HTML

CSS