We are going to be creating a content slider for today. We're not pulling a rabit out of the hat here beacuse it's easier than you might think. All you need is the logic.
Important points
These are the things you need to know in order to build you logic.
- There must be a visible area that will show one item at a time on your content slider.
- The width of the content is/will greater than the width of the visible area. This content must be movable which means its CSS
positionpropery must beabsoluteorrelative - The visible area will be a specific width and height and should hide overflowing content. So this means on the visible area has to set the CSS
overflowproperty tohidden
With these important points we can sketch up something like so:
The content will be sliding to the left side of the screen. In this post we will be creating custom animations using the animate() jQuery function. Remember we will be "sliding" content to the left and this means we have to alter the left CSS property. Since our content slider is movable, we can use CSS properties such as top, left, bottom, and right to move it about. Each item within the content slider will have to be the size of the display window in width because when we slide the content we will be using the size of the window to show items one at a time. Here is the HTML file that does all this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Our content slider</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<style type="text/css">
body { font-family: Arial; }
h1 { font-size: 4em; text-align: center; }
.container {}
.content-visible-window {
width: 800px;
height: 360px;
overflow: hidden; /* hides content that overflows */
border: 1px solid #0099ff;
float: left;
-webkit-box-shadow: 0px 0px 4px #0099ff;
-moz-box-shadow: 0px 0px 4px #0099ff;
box-shadow: 0px 0px 4px #0099ff;
margin-left: 300px;
}
.content-slider {
float: left;
position: relative; /* To make the slider movable via animate() */
}
.content-slider li {
float: left; /* Places all the <li> elements in one row */
list-style: none;
}
.content-slider li div.image {
width: 22%;
float: left;
}
.content-slider li div.image img {
width: 150px;
border: 5px solid #660099;
}
.content-slider li div.description {
width: 70%;
float: left;
padding-left: 10px;
}
.content-slider li div.description h2 {
margin: 0;
}
.content-slider li div.description p {
font-size: 13px;
}
blockquote {
margin-left: 20px;
padding: 10px;
border-left: 4px solid #ccc;
font-size: 13px;
background: #f1f1f1;
}
</style>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
var contentSlider = $('.content-slider');
var animateBy = $('.content-visible-window').width();
var maxWidth = animateBy * $(contentSlider).find('li').length; //Calculate the maximum width of the slider
$(contentSlider).find('li').width(animateBy); //Set each <li> to be the size of the visible area
var sizeUpdate = maxWidth - animateBy; //To determine if we should animate tp the left again.
//If the value is 0 then we have to go back to the 1st <li>
$(contentSlider).width(maxWidth); //Set the width of the content slider
setInterval(function() {
if(sizeUpdate == 0) {
//Update the sizeUpdate variable
sizeUpdate = maxWidth - animateBy;
$(contentSlider).animate({'left' : '+=' + sizeUpdate + 'px'}, 500); //Go back to first <li>
} else {
$(contentSlider).animate({'left' : '-=' + animateBy + 'px'}, 800);
//Update the sizeUpdate variable
sizeUpdate -= animateBy;
}
} , 5000);
});
</script>
</head>
<body>
<h1>Content slider tutorial</h1>
<div class="container">
<div class="content-visible-window">
<ul class="content-slider">
<li>
<div class="image"><img src="1.jpg" /></div>
<div class="description">
<h2>Abstract Wallpaper 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
</div>
</li>
<li>
<div class="image"><img src="1.jpg" /></div>
<div class="description">
<h2>Abstract Wallpaper 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
</div>
</li>
<li>
<div class="image"><img src="3.jpg" /></div>
<div class="description">
<h2>Abstract Wallpaper 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
</div>
</li>
<li>
<div class="image"><img src="4.jpeg" /></div>
<div class="description">
<h2>Abstract Wallpaper 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
The important section to notice about this file is the <script> area. We get the width to animate by (as we mentioned earlier its the size of the display window) and then we calculate the maximum width of the content slider because you might never know how much content you might have on it so that's why we do this dynamically. We then set each <li> item to be of the size as the display window. Another thing to notice is that we used the find() method of the jQuery library which gets all elements matching the expression we provide it with (in this case all <li> elements inside the content slider) and put them inside an array.
The animation part is done through the setInterval() part. We covered how to use setInterval() in our here. Its lets us execute a function over a given interval. In our content slider example we set an interval of 5000 milliseconds and we call the animate() function every time to switch the content. The sizeUpdate variable is updated everytime to determine if we are the last item of the slider or not. If the variable is equal to 0 then we animate all the way back to the first item
Comments