CSSスライダーで自動再生を追加する

Question

CSSのスライダーに自動再生機能を追加したいのですが、現在のコード構造で可能かどうかはわかりません。コメント

は、私はここでCSSのコードがあるcodepan

おかげ の私の働きリンクを与える私はCSSでこれを行う方法を正確にわからないんだけど、JavaScriptで行うのは非常に簡単です

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

。

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

これはあなたの簡単な例のために動作しますが、あなたは大規模なアプリケーションdocument.querySelectorを見るためのより具体的なセレクタをしたいことがあります。間隔を使用して