Question

我试图在网页上使用纯html / css图像滑块，效果很好，直到尝试在同一页面上放置第二个滑块。在下面的代码片段中，您将看到ID用于将标签映射到各节以允许在元素之间进行转换。当您尝试在页面上放置第二个滑块时，以这种方式使用ID会中断。我在下面附有完整的示例代码。是否有一种简单的方法可以对此进行调整，以允许页面上有2个独立运行的滑块？

<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
  <div class="slide-image">
    first slide
  </div>
  <div class="carousel-controls">
    <label for="img-3" class="prev-slide">
      <span>&lsaquo;</span>
    </label>
    <label for="img-2" class="next-slide">
      <span>&rsaquo;</span>
    </label>
  </div>
</li>

https://plnkr.co/edit/jxg1OsvfHFbHQPb49TDm?p=preview

Answer 1

之所以发生这种情况，是因为滑块的两个输入单选都具有相同的名称（radio-buttons），这使您只能从所有radio-buttons输入中选择一项。每个滑块必须具有其自己的输入无线电，并具有不同的名称。

/* Styles go here */

ul.slides {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul.slides input {
    display: none;
}


.slide-container {
    display: block;
}

.slide-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all .7s ease-in-out;
}

    .slide-image img {
        width: auto;
        min-width: 100%;
        height: 100%;
    }

.carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 199;
    font-size: 100px;
    line-height: 400px;
    color: #000;
}

    .carousel-controls label {
        display: none;
        position: absolute;
        padding: 0 20px;
        opacity: 0;
        transition: opacity .2s;
        cursor: pointer;
    }

.slide-image:hover + .carousel-controls label {
    opacity: 0.5;
}

.carousel-controls label:hover {
    opacity: 1;
}

.carousel-controls .prev-slide {
    width: 49%;
    text-align: left;
    left: 0;
}

.carousel-controls .next-slide {
    width: 49%;
    text-align: right;
    right: 0;
}

.carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 199;
    text-align: center;
}

    .carousel-dots .carousel-dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #000;
        opacity: 0.5;
        margin: 10px;
        cursor: pointer;
    }

input:checked + .slide-container .slide-image {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .carousel-controls label {
    display: block;
}

input#img-0:checked ~ .carousel-dots label#img-dot-0,
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
    opacity: 1;
}


input:checked + .slide-container .nav label {
    display: block;
}

  <div>
    <div class="carousel">
      <ul class="slides">
        <input type="radio" name="radio-buttons" id="img-1" checked />
        <li class="slide-container">
          <div class="slide-image">
            first slide
          </div>
          <div class="carousel-controls">
            <label for="img-3" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-2" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <input type="radio" name="radio-buttons" id="img-2" />
        <li class="slide-container">
          <div class="slide-image">
            second slide
          </div>
          <div class="carousel-controls">
            <label for="img-1" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-3" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <input type="radio" name="radio-buttons" id="img-3" />
        <li class="slide-container">
          <div class="slide-image">
            third slide
          </div>
          <div class="carousel-controls">
            <label for="img-2" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-1" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <div class="carousel-dots">
          <label for="img-1" class="carousel-dot" id="img-dot-1"></label>
          <label for="img-2" class="carousel-dot" id="img-dot-2"></label>
          <label for="img-3" class="carousel-dot" id="img-dot-3"></label>
        </div>
      </ul>
    </div>
  </div>

  <div>
    <div class="carousel">
      <ul class="slides">
        <input type="radio" name="radio-buttons2" id="img-4" checked />
        <li class="slide-container">
          <div class="slide-image">
            first slide
          </div>
          <div class="carousel-controls">
            <label for="img-6" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-5" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <input type="radio" name="radio-buttons2" id="img-5" />
        <li class="slide-container">
          <div class="slide-image">
            second slide
          </div>
          <div class="carousel-controls">
            <label for="img-4" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-6" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <input type="radio" name="radio-buttons2" id="img-6" />
        <li class="slide-container">
          <div class="slide-image">
            third slide
          </div>
          <div class="carousel-controls">
            <label for="img-5" class="prev-slide">
              <span>&lsaquo;</span>
            </label>
            <label for="img-4" class="next-slide">
              <span>&rsaquo;</span>
            </label>
          </div>
        </li>
        <div class="carousel-dots">
          <label for="img-4" class="carousel-dot" id="img-dot-4"></label>
          <label for="img-5" class="carousel-dot" id="img-dot-5"></label>
          <label for="img-6" class="carousel-dot" id="img-dot-6"></label>
        </div>
      </ul>
    </div>
  </div>

Answer 2

https://plnkr.co/edit/KeJGhctcsPcJScajsylk?p=preview

<input type="radio" name="radio-buttons" id="img-4" checked />

<label for="img-4" class="carousel-dot" id="img-dot-4"></label>

这里是调整后的版本。您多次使用ID，这是不可以的。 ID是唯一的，只能用于1个元素。

当我将第二个滑块ID更改为4-5-6而不是上面相同的1-2-3时，它工作正常。只要看看您如何显示侧箭头，就可以了。我会考虑显示悬停在元素上方的箭头。

重用ID的图像滑块

2 个答案: