jQuery

The HTML

Copy

<ul id="slides">
	<li class="slide showing">Slide One</li>
	<li class="slide">Slide Two</li>
	<li class="slide">Slide Three</li>
</ul>

The CSS

Copy

#slides {
	position: relative;
	height: 300px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	transition: 1.2s;
	color: #fff;
}
	
.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;
}

/* Optional CSS to target each slide */

.slide:nth-child(1) {
    background: red;
}

.slide:nth-child(2) {
    background: blue;
}

.slide:nth-child(3) {
    background: purple;
}

The jQuery

Copy

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,6000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

The Result

• Slide One
• Slide Two
• Slide Three