在CSS滑块上添加自动播放

Question

I would like to add an autoplay functionality to my css slider but not sure if it is possible with the current code structure.

on comment i give my working link of codepan

Thanks here is css code

Answer 1

I'm not exactly sure how to do this with just CSS, but it is pretty easy to do with JavaScript.

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

This works for your simple example, but you may want a more specific selector for larger applications see document.querySelector .

Answer 2

Using an interval, you can simulate clicks on your radios...

 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> 

You better look at the snippet in full page (link at upper-right corner).