在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>

您在整页（在右上角的链接）的片段更好看。

Answer 2

我不完全知道如何只用CSS做到这一点，但它是很容易做到的JavaScript 。

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

本工程为您简单的例子，但是你可能需要一个更具体的选择对于较大的应用程序见document.querySelector。