How to Create a Simple Slider Using jQuery

Did you know what is jquery? Jquery is a cross browser JavaScript library designed to simplify the client-side scripting of HTML. Jquery is free, open source software, dual-licensed under the MIT License and the GNU General Public License. Jquery also provides capabilities for developers to create plugins on top of the JavaScript library.

Because of jquery’s architecture, other developers can use its constructs to create plugin code to extend  its functionality. There are so many jquery plugins available that cover a wide range of functionality  such as image slinder,  XML and XSLT tools ,AJAX helpers, datagrids, dynamic lists, drag and drop, events, webservices, modal window.

Simple Slider Using jQuery

In this tutorial, we can try to make an image slider with jQuery. It’s just so intuitive and simple. This plug-in is an unique transition effects, compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, and Opera 9+. Other features are valid markup, flexible configuration, auto slide, navigation box, lightweight (8kb only), linking images, free to use under MIT licence, and fully customizable using CSS.

The first step is download jquery version 1.4.2. You can download it in this link . After that, save it in the same location with other code which will I give. As usually, jquery project developed by 3 languages they are HTML, CSS, and JavaScript. So, in this project at least you must have jquery, HTML CSS and JavaScript code, and images.

<div id="coin-slider">

<a href="url1" target="_blank">

<img src="img1.jpg" alt="" />

<span>This is img1</span>

</a>

<a href="url2" target="_blank">

<img src="img2.jpg" alt="" />

<span>This is img2</span>

</a>

<a href="url3">

<img src="img3.jpg" alt="" />

<span>This is img3</span>

</a></div>

The HTML really simple, just a div with an id and 3 images in it. If you want to add more images, just copy the code start from , after that change image url, img src, and description. You can give a different description for different image, just write it between code.

CSS (coin-slider-styles.css)

/*
 
Coin Slider jQuery plugin CSS styles
 
http://workshop.rs/projects/coin-slider
 
*/
 
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
 
.coin-slider a{ text-decoration: none; outline: none; border: none; }
 
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
 
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
 
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
 
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
 
.cs-prev,
 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

You can change background color, title, button, etc.

JavaScript (coin-slider.js)

/**
 * Coin Slider - Unique jQuery Image Slider
 * @version: 1.0 - (2010/04/04)
 * @requires jQuery v1.2.2 or later
 * @author Ivan Lazarevic
 * Examples and documentation at: http://workshop.rs/projects/coin-slider/
 
 * Licensed under MIT licence:
 *   http://www.opensource.org/licenses/mit-license.php
**/
 
(function($) {
 
 var params         = new Array;
 var order        = new Array;
 var images        = new Array;
 var links        = new Array;
 var linksTarget = new Array;
 var titles        = new Array;
 var interval    = new Array;
 var imagePos    = new Array;
 var appInterval = new Array;
 var squarePos    = new Array;
 var reverse        = new Array;
 
 $.fn.coinslider= $.fn.CoinSlider = function(options){
 
 init = function(el){
 
 order[el.id]         = new Array();    // order of square appereance
 images[el.id]        = new Array();
 links[el.id]        = new Array();
 linksTarget[el.id]    = new Array();
 titles[el.id]        = new Array();
 imagePos[el.id]        = 0;
 squarePos[el.id]    = 0;
 reverse[el.id]        = 1;
 
 params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
 
 // create images, links and titles arrays
 $.each($('#'+el.id+' img'), function(i,item){
 images[el.id][i]         = $(item).attr('src');
 links[el.id][i]         = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
 linksTarget[el.id][i]     = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
 titles[el.id][i]         = $(item).next().is('span') ? $(item).next().html() : '';
 $(item).hide();
 $(item).next().hide();
 });
 
 // set panel
 $(el).css({
 'background-image':'url('+images[el.id][0]+')',
 'width': params[el.id].width,
 'height': params[el.id].height,
 'position': 'relative',
 'background-position': 'top left'
 }).wrap("
 
");
 
 // create title bar
 $('#'+el.id).append("
 
");
 
 $.setFields(el);
 
 if(params[el.id].navigation)
 $.setNavigation(el);
 
 $.transition(el,0);
 $.transitionCall(el);
 
 }
 
 // squares positions
 $.setFields = function(el){
 
 tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
 tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
 
 counter = sLeft = sTop = 0;
 tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
 tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
 
 for(i=1;i  0){
 gapy--;
 sHeight = tHeight+1;
 } else {
 sHeight = tHeight;
 }
 
 for(j=1; j  0){
 gapx--;
 sWidth = tWidth+1;
 } else {
 sWidth = tWidth;
 }
 
 order[el.id][counter] = i+''+j;
 counter++;
 
 if(params[el.id].links)
 $('#'+el.id).append("");
 else
 $('#'+el.id).append("
 
");
 
 // positioning squares
 $("#cs-"+el.id+i+j).css({
 'background-position': -sLeft +'px '+(-sTop+'px'),
 'left' : sLeft ,
 'top': sTop
 });
 
 sLeft += sWidth;
 }
 
 sTop += sHeight;
 sLeft = 0;
 
 }
 
 $('.cs-'+el.id).mouseover(function(){
 $('#cs-navigation-'+el.id).show();
 });
 
 $('.cs-'+el.id).mouseout(function(){
 $('#cs-navigation-'+el.id).hide();
 });
 
 $('#cs-title-'+el.id).mouseover(function(){
 $('#cs-navigation-'+el.id).show();
 });
 
 $('#cs-title-'+el.id).mouseout(function(){
 $('#cs-navigation-'+el.id).hide();
 });
 
 if(params[el.id].hoverPause){
 $('.cs-'+el.id).mouseover(function(){
 params[el.id].pause = true;
 });
 
 $('.cs-'+el.id).mouseout(function(){
 params[el.id].pause = false;
 });
 
 $('#cs-title-'+el.id).mouseover(function(){
 params[el.id].pause = true;
 });
 
 $('#cs-title-'+el.id).mouseout(function(){
 params[el.id].pause = false;
 });
 }
 
 };
 
 $.transitionCall = function(el){
 
 clearInterval(interval[el.id]);
 delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
 interval[el.id] = setInterval(function() { $.transition(el)  }, delay);
 
 }
 
 // transitions
 $.transition = function(el,direction){
 
 if(params[el.id].pause == true) return;
 
 $.effect(el);
 
 squarePos[el.id] = 0;
 appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]])  },params[el.id].sDelay);
 
 $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
 
 if(typeof(direction) == "undefined")
 imagePos[el.id]++;
 else
 if(direction == 'prev')
 imagePos[el.id]--;
 else
 imagePos[el.id] = direction;
 
 if  (imagePos[el.id] == images[el.id].length) {
 imagePos[el.id] = 0;
 }
 
 if (imagePos[el.id] == -1){
 imagePos[el.id] = images[el.id].length-1;
 }
 
 $('.cs-button-'+el.id).removeClass('cs-active');
 $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
 
 if(titles[el.id][imagePos[el.id]]){
 $('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
 $('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
 } else {
 $('#cs-title-'+el.id).css('opacity',0);
 }
 
 };
 
 $.appereance = function(el,sid){
 
 $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
 
 if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
 clearInterval(appInterval[el.id]);
 return;
 }
 
 $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
 $('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
 squarePos[el.id]++;
 
 };
 
 // navigation
 $.setNavigation = function(el){
 // create prev and next
 $(el).append("
 
");
 $('#cs-navigation-'+el.id).hide();
 
 $('#cs-navigation-'+el.id).append("prev");
 $('#cs-navigation-'+el.id).append("next");
 $('#cs-prev-'+el.id).css({
 'position'     : 'absolute',
 'top'        : params[el.id].height/2 - 15,
 'left'        : 0,
 'z-index'     : 1001,
 'line-height': '30px',
 'opacity'    : params[el.id].opacity
 }).click( function(e){
 e.preventDefault();
 $.transition(el,'prev');
 $.transitionCall(el);
 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
 
 $('#cs-next-'+el.id).css({
 'position'     : 'absolute',
 'top'        : params[el.id].height/2 - 15,
 'right'        : 0,
 'z-index'     : 1001,
 'line-height': '30px',
 'opacity'    : params[el.id].opacity
 }).click( function(e){
 e.preventDefault();
 $.transition(el);
 $.transitionCall(el);
 }).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
 
 // image buttons
 $("
 
").appendTo($('#coin-slider-'+el.id));
 
 for(k=1;k"+k+"");
 }
 
 $.each($('.cs-button-'+el.id), function(i,item){
 $(item).click( function(e){
 $('.cs-button-'+el.id).removeClass('cs-active');
 $(this).addClass('cs-active');
 e.preventDefault();
 $.transition(el,i);
 $.transitionCall(el);
 })
 });
 
 $('#cs-navigation-'+el.id+' a').mouseout(function(){
 $('#cs-navigation-'+el.id).hide();
 params[el.id].pause = false;
 });
 
 $("#cs-buttons-"+el.id).css({
 'left'            : '50%',
 'margin-left'     : -images[el.id].length*15/2-5,
 'position'        : 'relative'
 
 });
 
 }
 
 // effects
 $.effect = function(el){
 
 effA = ['random','swirl','rain','straight'];
 if(params[el.id].effect == '')
 eff = effA[Math.floor(Math.random()*(effA.length))];
 else
 eff = params[el.id].effect;
 
 order[el.id] = new Array();
 
 if(eff == 'random'){
 counter = 0;
 for(i=1;i  m){  from++;  }   if(from > to) dowhile= false;   }   }   // straight effect  $.straight = function(el){  counter = 0;  for(i=1;i

You can manage the panel, squares position, transitions, navigation, prev and next position, image buttons, and effects here.

JavaScript2 (coin-slider.min.js)

/**
 * Coin Slider - Unique jQuery Image Slider
 * @version: 1.0 - (2010/04/04)
 * @requires jQuery v1.2.2 or later
 * @author Ivan Lazarevic
 * Examples and documentation at: http://workshop.rs/projects/coin-slider/
 
 * Licensed under MIT licence:
 *   http://www.opensource.org/licenses/mit-license.php
**/
 
(function($){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;$.fn.coinslider=$.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=$.extend({},$.fn.coinslider.defaults,options);$.each($('#'+el.id+' img'),function(i,item){images[el.id][i]=$(item).attr('src');links[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('href'):'';linksTarget[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('target'):'';titles[el.id][i]=$(item).next().is('span')?$(item).next().html():'';$(item).hide();$(item).next().hide();});$(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("
 
");$('#'+el.id).append("
 
");$.setFields(el);if(params[el.id].navigation)
$.setNavigation(el);$.transition(el,0);$.transitionCall(el);}
$.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;}
for(j=1;j0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;}
order[el.id][counter]=i+''+j;counter++;if(params[el.id].links)
$('#'+el.id).append("");else
$('#'+el.id).append("
 
");$("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;}
sTop+=sHeight;sLeft=0;}
$('.cs-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('.cs-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});$('#cs-title-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('#cs-title-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){$('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});$('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});$('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});$('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};$.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){$.transition(el)},delay);}
$.transition=function(el,direction){if(params[el.id].pause==true)return;$.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){$.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);$(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined")
imagePos[el.id]++;else
if(direction=='prev')
imagePos[el.id]--;else
imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;}
if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;}
$('.cs-button-'+el.id).removeClass('cs-active');$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){$('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{$('#cs-title-'+el.id).css('opacity',0);}};$.appereance=function(el,sid){$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;}
$('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});$('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};$.setNavigation=function(el){$(el).append("
 
");$('#cs-navigation-'+el.id).hide();$('#cs-navigation-'+el.id).append("prev");$('#cs-navigation-'+el.id).append("next");$('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el,'prev');$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el);$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$("
 
").appendTo($('#coin-slider-'+el.id));for(k=1;k"+k+"");}
$.each($('.cs-button-'+el.id),function(i,item){$(item).click(function(e){$('.cs-button-'+el.id).removeClass('cs-active');$(this).addClass('cs-active');e.preventDefault();$.transition(el,i);$.transitionCall(el);})});$('#cs-navigation-'+el.id+' a').mouseout(function(){$('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});$("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});}
$.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='')
eff=effA[Math.floor(Math.random()*(effA.length))];else
eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i
Don’t forget to add this code in the “head” tag at your HTML page.
<pre><code><script src="jquery-1.4.2.js"></script></code>
<code><script src="coin-slider.min.js"></script></code>
<code><link rel="stylesheet" href="coin-slider-styles.css" />

At the end all you have to do is to call the plugin.

<pre><code><script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider();
	});
</script></code></pre>

jquery

Now you have a simple but cool slider.. You can see that it slide automatically, but you still can navigate the slider by the small box under the slider (it sum will same with images sum), if you take your pointer into the slider, you will see ‘prev’ and ‘next’ button at right and left slider.

[demo href="http://demo1.denbagus.net"]

Our prep courses include the latest set of MB5-858 and 70-567 exam with 100% guarantee for victory in MB3-207 and MB3-462 .Our MB3-208 is simply the best in its quality.

EmailFacebook4Google+0StumbleUpon74Twitter36Reddit0Pinterest0Digg

5 Responses to “How to Create a Simple Slider Using jQuery”

  1. tks for the info…..

  2. if you are interested in a featured content or news slider. i’ve been maintaining an excellent one that mimics yahoo’s.

    http://rip747.github.com/Yahoo-style-news-slider-for-jQuery/

  3. Be cool!

  4. vai pedir comentario toda hora???
    –’

Trackbacks/Pingbacks

  1. 54 jQuery Tutorials and How Tos - 4 November 2011

    [...] 028. How to Create a Simple Slider Using jQuery [...]

Leave a Reply