Content sliders add very nice interactivity to your website. In this tutorial I will show you how to use jQuery to create a simple content slider. Of course you can change the styles look and feel of the product your self but for now I’m keeping it simple. The final product will look like this:
First thing you should do is get your folder structure in order so in the root folder of your project create a folder called ‘assets’ and in that folder create three more folders called ‘js’, ‘style’ and ‘img’ to contain your JavaScript your css and your images. I am using ‘io’ as my root folder but you can use whatever you like, somehting liek ‘Content_Slider’ comes to mind. The end folder structure should will look like this:
In the project root folder create a new html file and name it index.html and past the following code inside:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="assets/css/style.css" media="screen" type="text/css" rel="stylesheet" />
<title>JQuery Content Slider</title>
</head>
<body>
<div id="content">
<div id="leftArrow"></div>
<div id="viewport">
<div id="conveyor">
<div class="item no1">
<p>Hello</p>
<div class="news no3">
<p>Hello</p>
</div>
</div>
<div class="item no2">
<p>Hello</p>
<div class="news no1">
<p>Hello</p>
</div>
</div>
<div class="item lastItem no3">
<p>Hello</p>
<div class="news no2">
<p>Hello</p>
</div>
</div>
</div>
</div>
<div id="rightArrow"></div>
</div>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="assets/js/JavaScript.js">
</script>
</body>
</html>
Now that the html file is set up you’ll need to create another file called style.css to contain all of your styles. Copy and past this code into the style.css file and stick it into the css folder:
* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
/* */
#content{
margin:100px auto;
padding:5px;
width:688px;
display:table;
}
/* */
#leftArrow, #rightArrow, #viewport{
float:left;
}
#leftArrow, #rightArrow{
width:100px;
height:100px;
margin:50px auto;
cursor:pointer;
}
#leftArrow{
background:transparent url(../img/nav.png) no-repeat 0px 0px;
}
#rightArrow{
clear:right;
background:transparent url(../img/nav.png) no-repeat 0px -100px;
}
/* */
#viewport{
width:482px;
height:200px;
overflow:hidden;
border:1px #333 solid;
}
/* */
#conveyor{
position:relative;
left:0px;
width:1452px;
height:200px;
}
#conveyor .item{
float:left;
width:482px;
height:200px;
}
#conveyor .item .lastItem{
clear:right;
}
/**/
.news{
min-height:60px;
width:476px;
margin:3px auto;
position:relative;
top:100%;
border:1px #444 solid;
}
/* */
.no1{background-color:aqua;}
.no2{background-color:blue;}
.no3{background-color:green;}
.item, .news, #viewport{
-moz-border-radius:10px;
}
p{
padding:15px;
font-size:24px;
font-weight:bold;
}
Now you should have a page with a look but no interactivity to it so create a new javascript file and call is JavaScript.js and copy and past the following code into it and stick it into your js folder:
$(document).ready(function() {
/* */
var conveyor = $("#conveyor");
var conveyorPos = conveyor.position();
var leftArrow = $("#leftArrow");
var rightArrow = $("#rightArrow");
var item = $(".item");
var dist = item.width();
/* */
leftArrow.click(function(){
updateConveyorPos();
if(conveyorPos.left < 0){ conveyor.animate({ "left": "+="+dist+"px" }, "slow"); } }); rightArrow.click(function(){ updateConveyorPos(); if(conveyorPos.left > -567){
conveyor.animate({
"left": "-="+dist+"px"
}, "slow");
}
});
/* */
item.mouseenter(function(){
$(".news").animate({
"top": "61px"
}, "slow");
});
item.mouseleave(function(){
$(".news").animate({
"top": "100%"
}, "slow");
});
/* */
function updateConveyorPos(){
conveyorPos = conveyor.position();
//alert("left: " + conveyorPos.left + "/ dist: " + dist);
}
});
Luckily the folks at JQuery offer free hosting for their latest release so we don’t need to store it in our own file system. But that’s it, you should now have a JQuery content slider that you can play with yippiee!!.
Thanks James.. cant believed I missed this blog jem, subbed. And nice tutorial.
Thanks for the props Sean, much appreciated :)
Sweet! Doesn’t render properly in Safari 4 thou =/
Thanks Dez, :) I didn’t test it outside of Firefox and IE8. For some reason Chrome won’t even load this site, lol. I see now safari has some issues. I would bet on this being a cross browser compatibility issue with how floats, with absolute widths on divs, get rendered.
very nice dude thanks, i relay need this. once again thanks