How To Create Slide Show Plugi-in In jQuery

In How To Create Slide Show With Pure CSS3 i explained how to create a slide show widget using CSS3. But the problem is it won't work in non-CSS3 support browsers like(IE<9). In this post we will learn how to create slide show plugin using jQuery. By the way there are so many slide-show plugins out there. My intention is teach you how to create your own plugin.
How To Create Slide Show Plugi-in In jQuery


demo

download

How it Works 1)Create a frame which will show one image at time and hide all other.
2)Create a slider inside the frame it holds all imags and it will have width=number of image X width of each slide
3)By using jquery animation and CSS move the slider.
5)Add Event when we click Next,Prev Buttons.
4)Alseo Set Timer so that it automatically moves with out any interaction.
We need to have minimal html as follows.
Read:Create Your Own JQuery Plugin
HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/tuSlider.js"></script>  
</head>  
<body>  
<div class="slideshow">  
<img src="img/img1.jpg" />  
<img src="img/img2.jpg" />  
<img src="img/img3.jpg" />  
</div>  
</body>  
</html> 

Now we will start Creating our plugin. We are creating our plugin in tuSlider.js file under js folder.
Minimal jQuery plug-in code

(function($){ 
//tuSlider plugin 
$.fn.tuSlider=function(options){ 
var o = {  
'width': 700,  
'height': 400,  
'auto': true,  
'autoSpeed': 2000,  
}; 
return this.each(function(){  
$.extend(o,options); 
// Our plug in code comes here 
}); 
}; 
})(jQuery); 

From here you can add the code in above snippet and test in your browser by inspecting elements.
Creating Frame

$(this).css({"position":"relative"}); 
//Creating Frame and applying styles 
$(this).children().wrapAll('<div class="frame" >'); 
var frame=$(this).find(".frame");  
frame.css({"width":o.width,  
"height":o.height, 
"border":"1px solid #ccc", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow":"0px 0px 2px #999999", 
"overflow":"hidden", 
"padding": "0px"}); 

Creaging next,prev Buttons

//Adding next, previous buttons to frame 
$(this).append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>'); 
var prev=$(this).find("a.prev");  
var next=$(this).find("a.next"); 

//applying CSS for Next and Prev buttons 
prev.css({"position": "absolute",  
"width": "35px", 
"height": "25px", 
"padding": "5px", 
"color": "#fff", 
"text-decoration":"none", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow": "0px 0px 2px #999999", 
"background": "#000", 
"line-height": "25px", 
"z-index": "5"}); 
next.css({"position": "absolute",  
"width": "35px", 
"height": "25px", 
"padding": "5px", 
"color": "#fff", 
"text-decoration":"none", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow": "0px 0px 2px #999999", 
"background": "#000", 
"line-height": "25px", 
"z-index": "5"}); 

prev.css({"top":((o.height)/2)});  
next.css({"top":((o.height)/2),"left":(o.width-45)}); 

Creating Slider

//finding total number of images and applying styles 
var imgs=frame.find('img');  
var imgCount=imgs.length; 

imgs.css({"float":"left","width":o.width,"height":o.height}); 

//Creating Slider 
frame.children().wrapAll('<div class="slider" >');  
var slider=frame.find(".slider");  
slider.css({"width":o.width*imgCount}); 

Creating Class

var tuSlider=function(){ 

//finding the total width of all images 
this.Cprev=prev;  
this.Cnext=next;  
this.Cimgs=imgs;  
//to get current img number 
this.getIndex = function () { // Index  
return this.Cimgs.filter('.current').index();  
}; 
//to go with animation 
this.go = function (index) {  
slider.animate({ marginLeft: -(index*o.width)} , o.speed);  
this.Cimgs  
.removeClass('current') 
.eq(index) 
.addClass('current'); 
}; 
this.nextSlide = function () {  
var index = this.getIndex();  
if (index < this.imgCount-1) {  
//to go to next image 
this.go(index + 1);  
} else { 
//to go to first image 
this.go(0);  
} 
}; 
this.prevSlide = function () {  
var index = this.getIndex();  
if (index > 0) {  
//to go to previous image 
this.go(index - 1);  
} else { 
//to go to last image 
this.go(imgCount-1);  
} 
}; 
//initilizeing function 
this.init = function () {  
this.Cimgs.first().addClass('current'); 

}; 
}; 

Mouse Events

//createing object for tuSlider class 
var tusObj=new tuSlider();  
tusObj.init(); 

//-------mouse click events------// 
next.click(function(e){  
e.preventDefault();  
tusObj.nextSlide();  
}); 

prev.click(function(e){  
e.preventDefault();  
tusObj.prevSlide();  
}); 

Setting Timer

//----------auto rotate chek --------// 
if (o.auto === true) {  
var timer = function () {  
tusObj.prevSlide();  
}; 
} 
//setting timer 
setInterval(timer, o.autoSpeed); 

Compleate tuSlider.js

(function($){ 
//tuSlider plugin 
$.fn.tuSlider=function(options){ 
var o = {  
'width': 700,  
'height': 400,  
'auto': true,  
'autoSpeed': 2000,  
}; 
return this.each(function(){  
$.extend(o,options); 
$(this).css({"position":"relative"}); 
//Creating Frame and applying styles 
$(this).children().wrapAll('<div class="frame" >'); 
var frame=$(this).find(".frame");  
frame.css({"width":o.width,  
"height":o.height, 
"border":"1px solid #ccc", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow":"0px 0px 2px #999999", 
"overflow":"hidden", 
"padding": "0px"}); 
//Adding next, previous buttons to frame 
$(this).append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>'); 
var prev=$(this).find("a.prev");  
var next=$(this).find("a.next");  
//applying CSS for Next and Prev buttons 
prev.css({"position": "absolute",  
"width": "35px", 
"height": "25px", 
"padding": "5px", 
"color": "#fff", 
"text-decoration":"none", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow": "0px 0px 2px #999999", 
"background": "#000", 
"line-height": "25px", 
"z-index": "5"}); 
next.css({"position": "absolute",  
"width": "35px", 
"height": "25px", 
"padding": "5px", 
"color": "#fff", 
"text-decoration":"none", 
"-moz-border-radius": "5px", 
"-webkit-border-radius": "5px", 
"border-radius": "5px", 
"box-shadow": "0px 0px 2px #999999", 
"background": "#000", 
"line-height": "25px", 
"z-index": "5"}); 
prev.css({"top":((o.height)/2)});  
next.css({"top":((o.height)/2),"left":(o.width-45)});  
//finding total number of images and applying styles 
var imgs=frame.find('img');  
var imgCount=imgs.length;  
imgs.css({"float":"left","width":o.width,"height":o.height});  
//Creating Slider 
frame.children().wrapAll('<div class="slider" >');  
var slider=frame.find(".slider");  
slider.css({"width":o.width*imgCount});  
var tuSlider=function(){  
//finding the total width of all images 
this.Cprev=prev;  
this.Cnext=next;  
this.Cimgs=imgs;  
//to get current img number 
this.getIndex = function () { // Index  
return this.Cimgs.filter('.current').index();  
}; 
//to go with animation 
this.go = function (index) {  
slider.animate({ marginLeft: -(index*o.width)} , o.speed);  
this.Cimgs  
.removeClass('current') 
.eq(index) 
.addClass('current'); 
}; 
this.nextSlide = function () {  
var index = this.getIndex();  
if (index < this.imgCount-1) {  
//to go to next image 
this.go(index + 1);  
} else { 
//to go to first image 
this.go(0);  
} 
}; 
this.prevSlide = function () {  
var index = this.getIndex();  
if (index > 0) {  
//to go to previous image 
this.go(index - 1);  
} else { 
//to go to last image 
this.go(imgCount-1);  
} 
}; 
//initilizeing function 
this.init = function () {  
this.Cimgs.first().addClass('current'); 

}; 
}; 
//createing object for tuSlider class 
var tusObj=new tuSlider();  
tusObj.init(); 

//-------mouse click events------// 
next.click(function(e){  
e.preventDefault();  
tusObj.nextSlide();  
}); 

prev.click(function(e){  
e.preventDefault();  
tusObj.prevSlide();  
}); 

//----------auto rotate chek --------// 
if (o.auto === true) {  
var timer = function () {  
tusObj.prevSlide();  
}; 
} 
//setting timer 
setInterval(timer, o.autoSpeed);  
}); 
}; 
})(jQuery); 

Calling plugin

<script type="text/javascript">  
$(document).ready(function(){ 
$('.slideshow').tuSlider(); 
}); 
</script> 

Your need to add the above code in you html. Here you can also pass the parameters like height,width,etc. Reference
I got all the amazing images used in this plugin got form apofiss.
Hope you like it.Thank you.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.