Jquery Slider Tutorial For Beginners

This is a simple jQuery slider tutorial for beginners that will first cover the logic behind the slider and how it functions, and then cover how to construct the code.

The slider we'll be building will be a fairly simple, slider that will fade from one block of content to the next. Each block of content will be able to hold as many HTML elements as you will need. As this is just a simple example, we will only be focusing on the fade transition for this slider.

Most of the work for this slider will actually be done by our CSS file which controls all of the styling.

First, we will establish our slider dimensions, for this example we'll use a width of 940px and height of 350px. This means that each of our slides in the slider should have the dimensions 940px by 350px as well.

Each slide will be housed inside of a '<div>' element, so that the HTML structure looks like this:
<div id=”slider”>

Slide 1

</div>

Slide 2 Goes Here

</div>

Slide 3 Right Here

</div>

</div >

You can fill each div with as much or as little code as you'd like, whether it be an image by itself, or a full php contact form on top of a background image and accompanied by text.

Inside of our CSS, we are going to set the class “slider” to a relative position, and each of it's child div's will be set to an absolute position. This will cause all of the div elements inside of the #slider div to be stacked one on top of the next. The CSS should look like this:

#slider {
width:940px;
overflow:hidden;
margin:0px auto;
position:relative;
height:350px;
display:block;
}

#slider > div {
position:absolute;
top:0px;
width:100%;
}
.slides {
width:100%;
display:block;
overflow:hidden;
}

There are a few other styling elements thrown in above to help the styling, but they will be covered in another tutorial. It's also best practice to use CSS to make the images uniform by making sure the image width will always fit 100% of the slider container. This is achieved like this:

.slides img {
width:100%;
height: auto;
}

Now that we have our slider HTML structure and CSS styling set up we just need to set up our jQuery to make it all work. First, you will want to make sure you have a jQuery library installed on your site. To get the latest version, just head to www.jquery.com, scroll to the bottom of the page, and you will see “Quick Access”. Just copy that code into a script tag so it looks something like this:

This script needs to be included before the script for your slider. Now create a new javascript file and call it “slider.js” and save it in your website directory. Now with a couple of lines of jQuery we are going to simply have all of the div elements inside of the div “slider” fade from one to the next. That code will look like this:

$(function() { $("#slider > div:gt(0)").hide();

setInterval(function() {
$('#slider > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slider');
}, 5000);

});

The only values in this block of code that you may want to change are the fade in and fade out speed and the length of the pause between transitions. The fade in and fade out speed are defaulted to 1000ms or 1 second. If you'd like the transition to move more quickly or more slowly, just adjust the values as needed. The default slide pause speed is set to 5000ms, or 5 seconds, but you may want to have them run for longer depending upon the content you are using. Now you can save your slider.js file and head back to the main file where your slider will be displayed. Underneath the script that includes the jQuery library, you'll want to now include your slider script. It will look something like this:

Once this script is included, save all of your files, view the file with the slider inside of it in a browser, and you should see the slider fading from one div to the next.

You can download the source files here to use for a demo