在 CSS 滑块上添加自动播放

Question

我想在我的 CSS 滑块中添加自动播放功能，但不确定当前代码结构是否可行。

在评论中我给出了我的 codepan 的工作链接

谢谢 这是css代码

Answer 1

使用间隔，您可以模拟对收音机的点击...

var delay = 1500;
var sliderRadios = document.getElementsByName("carousel-3d");
var index=0
var imageCount = sliderRadios.length;

setInterval(function(){
  index++;
  if(index>imageCount-1){
    index=0;
  }
  sliderRadios[index].click();
  console.log(sliderRadios[index].id);
},delay);

.slider-container {
  position: relative;
  perspective: 350px;
  transform-style: preserve-3d;
}

.carousel-3d-item {
  position: absolute;
  top: 50%;
  left: 40%;
  outline: 1px solid transparent;
}

#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3),
{
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
  transform: translateX(-175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
  transform: translateX(0) translateZ(0);
  opacity: 1;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
  transform: translateX(175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

<div class="slider-container">
  <figure id="carousel--3d">
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-1" />
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-2" />
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-3" />
    <label for="carousel-3d-controller-1" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts cccc</p>
      </div>
    </label>

    <label for="carousel-3d-controller-2" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts bbbb</p>
      </div>
    </label>

    <label for="carousel-3d-controller-3" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts aaaa</p>
      </div>
    </label>
  </figure>
</div>

你最好看看整页的 sn-p（链接在右上角）。

Answer 2

我不确定如何仅使用 CSS 来做到这一点，但使用 JavaScript 很容易做到。

let selected = 0;
const buttons = document.querySelectorAll('input');
setInterval(() => {
  buttons[(selected++) % buttons.length].click();
}, 1000);

这适用于您的简单示例，但您可能需要针对较大应用程序的更具体的选择器，请参阅document.querySelector。