I am encountering an issue with removing the move class from my code. Can someone please check it out for me?
let lis = document.querySelectorAll('li')
let arr = [];
for (let i = 0; i < lis.length; i++) {
arr.push(lis[i]);
}
setInterval( function () {
let splice = arr.splice(0,1);
splice[0].classList.add('move');
arr.push(splice[0]);
},3500).red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.slideshow {
width: 350px;
height: 200px;
overflow: hidden;
border: 3px solid #F2F2F2;
}
.slideshow ul {
/* 4 images donc 4 x 100% */
width: 400%;
height: 200px;
padding:0; margin:0;
list-style: none;
transition: 2s;
}
.slideshow li {
float: left;
width: 25%;
height: 200px;
transition: .5s;
}
.move {
margin-left: -25%;
transition: .5s;
}<div class="slideshow">
<ul>
<li class='red'></li>
<li class='green'></li>
<li class='yellow'></li>
<li class='blue'></li>
</ul>
</div>Thank you in advance.
UPDATE
https://jsfiddle.net/o00nu4w8/
After using console.log, the desired effect is achieved, but the animation is not appearing.