jQuery Content Slider

JS file CSS file HTML file

$(document).ready(function() {

//set options

var speed = 500; // fade speed

var autoSwitch = true; // autoslide option

var autoSwitchSpeed = 4000; //autoslider speed

// add intitial active slide

$('.slide').first().addClass('active');

// hide all slides

$('.slide').hide();

// show first slide

$('.active').show();

// next handler

$('#next').on('click', nextSlide);

// previous handler

$('#prev').on('click', prevSlide);

// play slideshow

if(autoSwitch == true) {

setInterval(nextSlide, autoSwitchSpeed);

}

// switch to next slide

function nextSlide() {

$('.active').removeClass('active').addClass('oldActive');

if($('.oldActive').is(':last-child')) {

$('.slide').first().addClass('active');

} else {

$('.oldActive').next().addClass('active');

}

$('.oldActive').removeClass('oldActive');

$('.slide').fadeOut(speed);

$('.active').fadeIn(speed);

}

// go to previous slide

function prevSlide() {

$('.active').removeClass('active').addClass('oldActive');

if($('.oldActive').is(':first-child')) {

$('.slide').last().addClass('active');

} else {

$('.oldActive').prev().addClass('active');

}

$('.oldActive').removeClass('oldActive');

$('.slide').fadeOut(speed);

$('.active').fadeIn(speed);

}

});

* {

margin:0;

padding:0;

}

body {

font-family: 'Arial', sans-serif;

font-size: 14px;

color: #FFFFFF;

background: #333;

line-height: 1.6em;

}

a {

color:#FFFFFF;

text-decoration: none;

}

h1 {

text-align: center;

margin-bottom: 20px;

}

#container {

width: 980px;

margin: 40px auto;

position:relative;

overflow: hidden;

}

#slider {

width:940px;

height:350px;

position:relative;

overflow: hidden;

float: left;

padding;3px;

border: 2px solid #666;

border-radius: 5px;

}

#slider img {

width:940px;

height:350px;

}

.slide, .slide-copy {

position: absolute;

}

.slide-copy {

bottom: 0;

left: 0;

padding: 20px;

background: #7f7f7f;

background: rgba(0,0,0,0.5)

}

#prev, #next {

float: left;

margin-top: 130px;

cursor: pointer;

position: relative;

z-index: 2000;

}

#prev {

margin-right: -45px;

}

#next {

margin-left: -45px;

}

<!DOCTYPE html>

<head>

<title>JQuery Content Slider</title>

</head>

<body>

<h1>Content Slider</h1>

<h2>Slider One</h2>