How To Create Slide Show Plugi-in In jQuery
Published on November 22, 2012
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 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
$(document).ready(function() {
$('.slideshow').tuSlider();
});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.