在 CSS 滑块上添加自动播放

Question

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

在评论中，我给出了我的代码潘工作链接

谢谢 这是 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>

您最好查看整页的代码段(右上角的链接(。

Answer 2

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

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

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