Website Design : Jquery Slider Tutorial for Beginners

Today I am going to show you how to create a simple and easy to do Jquery slider. We have used this type of Jquery slider for numerous of our clients. Below is what the HTML is going to look like for this:

<div>
<div>
<img src="images/img1.jpg" alt="" />
<img src="images/img1_roll.jpg" class="front" alt="" />
</div>
</div>

The first div tag "container" will hold everything into place and we have it floated so you would be able to do multiple sliders in a row.

We then start with a simple div this div is going to hold both images into place in this tutorial we called it "wrap". The position is going to have to be relavtive so that it will hold the absolute positioned images. The reason we have class="front" is to clarify which image is on top… We will get to this more a little later.

CSS Code:

.container {
float:left;
width:275px;
margin:5px;
}
img {
position:absolute;
top:0; left:0;
}
.wrap {
width:275px;
height:190px;
position:relative;
overflow:hidden;
float:left;
}

The CSS is very simple when you break it down. First thing we need to do is look at the "wrap" You need to make sure that overflow is hidden otherwise it will just move the image down and will not hide the image as it slides down. The container is basic and simple and it holds everything inside of it… You can then add text etc inside the container.

Now when you look you should be able to see one image. Lets now go through the part to get the sliding effect going. I promise you its still very simple.

You can simply insert the follwing code below between your head tags at the top of your code. You will also need to include the jquery javascript framework found here. You will now need to change the .wrap to whatever your image holder class is. If you wish to add a border you can change the "top" : '0? to whatever you want the border to be. You now you should have a working demo slider.

Javascript Code:

<script type="text/javascript">
$(function() {
$('.wrap').hover(function() {
$(this).children('.front').stop().animate({ "top" : '200px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
 

How to make a link:

You will be unable to make the images linkable… So what we will do is make a transparent image the same size as the others and we will make that image the link. All you will do is add a div the exact same size of the div holding your images and position it over the top and make

it link.

Add this to your CSS:

.transparent{
position:absolute;
width:275px;
height:190px;
overflow:hidden;
background:url(images/trans.png) repeat;
}

and then simply add this to your HTML:1

   <a href="#" class="transparent"></a>

Don't forget to create the invisible image! You are done you should now have something that looks like this….

You can download all the files here.

People who read this post also read :

If you liked my post then,

Subscribe to this site via Email:

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!