.slideshow
img(src="https://picsum.photos/900/400?random=1", alt="")
img(src="https://picsum.photos/900/400?random=2", alt="")
img(src="https://picsum.photos/900/400?random=3", alt="")
img(src="https://picsum.photos/900/400?random=4", alt="")
img(src="https://picsum.photos/900/400?random=5", alt="")
View Compiled
.slideshow
margin: auto
position: relative
overflow: hidden
height: 400px
width: 900px
img
position: absolute
top: 0
left: 50%
transform: translateX(-50%)
display: none
View Compiled
$('.slideshow').each(function(){
let slideImgs = $(this).find('img'),
slideImgsCount = slideImgs.length,
currentIndex = 0;
slideImgs.eq(currentIndex).fadeIn();
setInterval(showNextSlide, 5000);
function showNextSlide(){
let nextIndex = (currentIndex + 1) % slideImgsCount;
slideImgs.eq(currentIndex).fadeOut();
slideImgs.eq(nextIndex).fadeIn();
currentIndex = nextIndex;
}
})
This Pen doesn't use any external CSS resources.