To display number of images with independent captions Carousel effect helps a great. Recently I worked for a shopping cart application which is used by more then 22 global costume manufactures of America. During I designed their landing page few Customers suggested me to use Carousel effects. They want to display their Fashion weeks top models with two lines of text in each slide. According to forward & backward button slides need to scroll horizontally. My Customers knows that I am an expert in Jquery. When I ask them can I use free plugins to implement Carousel? Simply they said “No, please design a Simple jQuery Carousel.”. I did that and presenting the same codes here. Only in place of images here I am using 14 slides with Alphabets to identify each. You can update them as per your requirements.
The logic I implemented in the below example is very simple & straight forward. To keep each slide independent here I used HTML ul & li elements. Total I have 14 slides named as A, B, C, …, M, N. Including this in body I have 2 more links Backward & Forward. Intention of these two links are when user will click on backward link it will show the slides available in left side & on click of forward button it will show the right side slides. After slide A slide N will show like a Circular Order.
To control width, height & color here I used CSS. Slide movement Logic is implemented in Jquery. On click of each link I am updating the CSS left property value for last item.
Simple-Jquery-Carousel.htm
<!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" >
<head>
<title>Simple Jquery Carousel Slider</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var carSlide = $('.jquery-carousel ul');
var carSlideChild = carSlide.find('li');
var NumberOfClick = 0;
var isClick = true;
/*Adding 1px margin to Carousel Slide*/
itemLength = carSlide.find('li:first').width() + 1;
carSlide.width(itemLength*carSlideChild.length);
refreshPosition();
$('.btnForward').click(function(){
if(isClick){
isClick = false;
NumberOfClick++;
carSlide.stop(false, true).animate({
left : '-='+itemLength
},300, function(){
lastItem = carSlide.find('li:first');
lastItem.remove().appendTo(carSlide);
lastItem.css('left', ((carSlideChild.length-1)*(itemLength))+(NumberOfClick*itemLength));
isClick = true;
});
}
});
$('.btnBackward').click(function(){
if(isClick){
isClick = false;
NumberOfClick--;
lastItem = carSlide.find('li:last');
lastItem.remove().prependTo(carSlide);
lastItem.css('left', itemLength*NumberOfClick);
carSlide.finish(true).animate({
left: '+='+itemLength
},300, function(){
isClick = true;
});
}
});
function refreshPosition(){
carSlideChild.each(function(){
$(this).css('left', itemLength*carSlideChild.index($(this)));
});
}
});
</script>
<style type="text/css">
.jquery-carousel {
position: relative;
padding-top: 20px;
overflow: hidden;
width: 306px;
height: 50px;
}
.jquery-carousel ul {
position: relative;
height: 50px;
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.jquery-carousel ul li {
position: absolute;
float: left;
margin-right: 1px;
background: #CCCCCC;
width: 50px;
height: 25px;
text-align: center;
padding-top: 25px;
}
</style>
</head>
<body>
<a href="javascript:void(0);" class="btnBackward">Backward</a>
<a href="javascript:void(0);" class="btnForward">Forward</a>
<div class="jquery-carousel">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</div>
</body>
</html>
