Content Slider is very popular now-a-days and used in various websites. You may choose from a wide range of jQuery plugins available online, or you can write it on your own. Yes it’s not a rocket science to create the content slider. This simple tutorial will guide you to build your own content slider, with simple Javascript code and animate() function provided in jQuery. This tutorial is divided into 4 parts – the html code, the style code, the jQuery code and additional functions.
View Demo (online) | Download Source Code (Zip)
The HTML Code
Copy and paste the following code inside body code. The code has a div with id “content” which contains a list. In these li elements you can have any other content or images, which you want to show. The code also includes two buttons Previous and Next. We will bind functions to these buttons to slide the next or previous content with their onclick event. Instead of these buttons you can use any other element like anchor tag (place and style them as you wish), and add those functions on its onclick event. You can Copy Paste the code below inside <body> tag.
<div id="content">
<ul>
<li>Content for 1st li element.</li>
<li>Content for 2nd li element.</li>
<li>Content for 3rd li element.</li>
<li>Content for 4th li element.</li>
<li>Content for 5th li element.</li>
<li>Content for 6th li element.</li>
<li>Content for 7th li element.</li>
</ul>
</div>
<button>Previous</button>
<button>Next</button>
Now your page will look somewhat like html-code.html
The Style Code
The diagram below explains the basic logic of content slider.
Layout of Content Slider
The div will remain fixed and the ul will be moved left or right in the background. The movement will be such that a li element will always shows up in the div. For implementing it we need to follow the styling below.
- The div will be of fixed width and height. The overflow property of the div should be set to hidden, so other li elements are not visible.
- The ul should have position property relative and padding as 0px. It will help us in controlling its movement inside the div. The width of the ul should be multiplication of number of li elements and width of the div (3500px in our case).
- The height and width of the div should be same as that of the div. The list-style and float properties should be set as none and left respectively.
Therefore our style code will look like following. Copy Paste it into your page’s <head> section.
<style type="text/css">
#content { border: 1px solid blue; height: 300px; width: 500px; overflow: hidden; }
#content ul { position: relative; width: 3500px; padding: 0px; }
#content ul li { height: 300px; width: 500px; list-style: none; float: left; }
</style>
After putting the code run the html on browser. You page will look like style-code.html. The first li element will be visible in the “content” div.
The jQuery Code
First include the jQuery library in the page.
<script type="text/javascript" src="jquery.js"></script>
Now we create functions inside the script tags. First let’s create the function to slide the content to show next li element in div. For that we need to move ul element in left. You need to keep following points in mind,
- Move ul to left using jQuery animate function. Initially the ul element left position is at 0px inside the div. Therefore we have to increment the left position of ul in negative.
- The movement should be such that the next li element completely fits into the “content” div. So, we will add -500px (width of the div) to the left position.
- When the last li element is reached, the function will do nothing. So, we need to check every time the function is called if the last element is reached or not. For that we need to see if the current position of the ul is greater than negative of the multiplication of width of div (500px) and one less in number of li element (which comes out to be -3000px in our case). If current position of ul is greater than -3000px then we can slide to next element. If current position of ul is equals to -3000px, its means the last li is visible in the div.
Below is the function to slide to next li, copy paste it into <head> section
<script type="text/javascript">
function slideNext(){
if(parseInt($("#content ul").css("left")) > -3000)
{
$("#content ul").animate({
left: parseInt($("#content ul").css("left"))-500+"px"
},1000);
}
}
</script>
For sliding to the previous li, the function needs to do following things,
- Move ul to right using jQuery animate function. We have to increment the left position of ul.
- The movement should be such that the previous li element completely fits into the “content” div. So, we will add 500px (width of the div) to the left position of ul.
- We need to check every time the function is called if the current li visible is first or not. For that we need to see if the current position of the ul is less than position of first li element i.e. 0px.
Below is the function slide to previous li, which needs to be added inside the script tag along with the above slidePrev() function.
function slideNext(){
if(parseInt($("#content ul").css("left")) < 0)
{
$("#content ul").animate({
left: parseInt($("#content ul").css("left"))+500+"px"
},1000);
}
}
Now we just have to add these functions to the buttons onclick events as below,
<button onclick="slidePrev();">Previous</button>
<button onclick="slideNext();">Next</button>
Now your page will look like jquery-code.html. That’s it, your content slider is ready. Now run the html page on browser and play with Next and Previous buttons. You can change the animation speed from 1000 to whatever you like to make the sliding slow or fast.
Additional Functions
You can add more functions to your content slider, like slide to the first element or slide to last element or slide to any particular li element. Copy paste following functions into <script> tags along with previous functions.
function slideFirst(){
$("#content ul").animate({ left: "0px" },1000);
}
function slideLast(){
$("#content ul").animate({ left: "-3000px" },1000);
}
function slideTo(x){
$("#content ul").animate({
left: "-"+(500*x)+"px" // 500 is the width of the div
},1000);
}
Create buttons/anchor tags for these functions and add these functions to their onclick events. The final page will look somewhat like additional-code.html.
You can also use jQuery easing plugin and apply different easing effects on jQuery animate function. This will add great attraction to your content slider.
I tried to make this tutorial as simple as possible. If you have any difficulty or confusion at any step, feel free to post your queries. Also let me know if you need tutorial on any other topic or plug-in. Now create your own content sliders and have fun!!!
