とりあえすjavascriptはこんな感じです
var fadeA = {
width : 1000,
height : 600,
index : 0,
parent : document.getElementById("slider-main"),
activeA : document.querySelectorAll(".slider_img"),
play : function(){
for(var i = 0; i < fadeA.activeA.length-1; i++){
fi = fadeA.activeA[i].classList;
fi.add("fadeIn");
}
function interVal(){
g = fadeA.parent.firstElementChild;
j = g.nextElementSibling;
j_ = j.classList;
j_.add("fadeIn");
d = fadeA.parent.appendChild(g);
}
// interVal();
setInterval(interVal, 2000)
},
}
fadeA.play();
続いて、cssです。
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
.fadeTarget{
animation-duration: 1.5s;
animation-fill-mode: both;
}
後は、sliderをつくる時のhtmlやcssを書いて完成とゆう感じです。