#Make a Simple JavaScript Slideshow without jQuery — SitePoint #https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/ <ul id="slides"> <li class="slide showing">Slide 1</li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> <li class="slide">Slide 4</li> <li class="slide">Slide 5</li> </ul> /* essential styles: these make the slideshow work */ #slides { position: relative; height: 300px; padding: 0px; margin: 0px; list-style-type: none; } .slide { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .showing { opacity: 1; z-index: 2; } /* non-essential styles: just for appearance; change whatever you want */ .slide { font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff; } .slide:nth-of-type(1) { background: red; } .slide:nth-of-type(2) { background: orange; } .slide:nth-of-type(3) { background: green; } .slide:nth-of-type(4) { background: blue; } .slide:nth-of-type(5) { background: purple; } var slides = document.querySelectorAll('#slides .slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide,2000); function nextSlide() { slides[currentSlide].className = 'slide'; currentSlide = (currentSlide+1)%slides.length; slides[currentSlide].className = 'slide showing'; }