How To Make Your Own Jquery Slider Plugin

How To Make Your Own Jquery Slider Plugin

Jquery is having a very wide scope in the field of web development and designing day by day. It makes us able to create our own custom jquery plugins  according to our needs. In this article I’m just going to tell you that how can you make your own jquery slider without including some another complex and lengthy jquery plugins in you code. Actually my main motive of this post is to make you understand that how a custom plugin is created in jquery and to do that I’ve choose jquery slider plugin example for your better understanding.

Make Your Own Jquery Slider Plugin

Make your own jquery slider plugin

1. Basic structure of a Jquery Custom Plugin:

(function($){
$.fn.example_plugin = function(){

write your code here........

};
})(jQuery);

The above code is the basic frame or structure of a custom jquery plugin where example_plugin is your plugin name depends on you. Write everything in the function by replacing the line “write your code here” and just attache is plugin to your selector.

List of basic files included in this jquery slider:

1. jquery-1.5.2.min.js

2. script.js

3. style.css

4. index.html

5. some images for sliding

Code Snippet of script.js

I’ve developed a very easy jquery slider plugin for you. The code is not too complex or messy as you are seeing below.

// JavaScript Document
(function($){
	$.fn.blogaddition_slider = function(speed,paginclass){
		var attachId,paginationClass,images,total_slides,i=0,j,k; //declare basic variables
		attachId = $(this).attr('id'); //id of element to which plugin is attached
		images = $(this).children();
		total_slides = images.length;
		paginationClass = paginclass || 'pagination';

		/*Make the pagination according to number of slides*/
		for(j=0;j<total_slides;j++){
$("."+paginationClass).append('</pre>
<ul>
	<li><a href="javascript:void(0);">'+j+'</a></li>
</ul>
<pre>

')
		}

		/*Add the 'current' class to first element of pagination*/
		$("."+paginationClass+" li:first-child").addClass('current');

		/*Perform the following when a pagination link is clicked*/
		$("."+paginationClass+" li a").live('click', function() {
			var start = $(this).parent('li').index();
			$("."+paginationClass+" li").removeAttr('class');
			$(this).parent('li').addClass('current'); //add current class to clicked link
			$(""+attachId+" li").hide();//hide all images
			$(images[start]).show();  //if second link clicked then second image is shown
			i = start;                //set the value of i according to recent click
		});

		/*run the function slidenow() on document ready*/
		setTimeout(slidenow, speed);

		/*slidenow() function is used to fadeOut previous image and fadeIn next image*/
		function slidenow()
		{

			$(images[i]).fadeOut(speed);
			i++;
			k = i+1;
			if (i > total_slides) k = 0;
			if (i >= total_slides) i = 0;
			$(images[i]).fadeIn();
			$("."+paginationClass+" li").removeAttr('class');
			$("."+paginationClass+" li:nth-child("+k+")").addClass('current');
			setTimeout(slidenow, speed);
		}
	};
})(jQuery);

// Initialization of the plugin on document ready
$(document).ready(function() {
    $('#my_slider').blogaddition_slider(2000);
});

style.css for basic styling and markup: This is the style sheet file to decorate your slider.

body{background:#eee;margin:0;padding:0}
.example{
	background:#FFF;
	width:570px;
	border:1px #D5D1D1 solid;
	margin:20px auto;
	padding:15px;
	position:relative;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-4px;
	z-index:500;
}
/*My slider styles*/
#my_slider {
    width:570px;
    height:270px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-3px;
	z-index:500;
}

/*
	Pagination
*/

.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../images/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

index.html main index file :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="example">
<img src="images/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
    <ul id="my_slider"> 
      <li><img src="images/slide-1.jpg" alt="" /></li>  
      <li><img src="images/slide-2.jpg" alt="" /></li>  
      <li><img src="images/slide-3.jpg" alt="" /></li>  
      <li><img src="images/slide-4.jpg" alt="" /></li>  
      <li><img src="images/slide-5.jpg" alt="" /></li>
    </ul>
</div>

<ul class="pagination">
</ul>
</body>
</html>

This was the basic file structure to let you know that what files the project contains. To use this plugin you can download this jquery slider in zip file given above or view the demo.