jQuery - SPLessons

Chapter 19

jQuery Slider

jQuery Slider

Steps to prepare HTML and CSS Markup

Follow the below steps to prepare HTML and CSS mark up.

First thing, create a simple HTML snippet to store slide show images which can be used for slide show. The MainDiv holds all the jQuery Slider images and navigation buttons to control the slider.

<div class="MainDiv">
   <div class="slider">
       // holds the all slider images     
   </div>
   <div class="slider-nav">
       // holds the navigation buttons
   </div>
</div>

CSS for MainDiv


* {
   margin:0;
   padding:0;	
}

.MainDiv {
   position:relative;
   width: 600px;
   margin: 100px auto 0;
}

Remember it is very important to set position of MainDiv to relative. So it positions element relative to its normal position.

The div element which have className is slider that holds all slider images.

<div class="slider">
  <ul class="slides">
    <li><img src="img/img1.gif" alt="image"></li>
    <li><img src="img/img2.gif" alt="image"></li>
    <li><img src="img/img3.gif" alt="image"></li>
    <li><img src="img/img4.gif" alt="image"></li>
  </ul>
</div>

Now, write CSS for slider.


.slider {
	width: inherit;
	height: 300px;
	overflow: hidden;
}

.slider ul {
	width: 10000px;
	list-style: none;
}

.slider li {
	float: left;
}

Create two navigation buttons. One is prevButton and another is nextButton to control the jQuery Slider. The #slider-nav holds the navigation buttons.




<div id="slider-nav">
	<button data-dir="prev" id="prev">Previous</button>
	<button data-dir="next" id="next">Next</button>
</div>



CSS for #slider-nav.


#slider-nav { 
	display: none; 
	margin-top: 1em;
}

#slider-nav button {
	padding: 1em;
	margin-right: 1em;
	border-radius: 10px;
	cursor: pointer;
	position:absolute;
	top:50%;
}

#slider-nav #prev {
	left:-15%;
}

#slider-nav #next {
	right:-15%;
}

Position absolute tells the browser to remove selected elements from normal flow of the document and will be placed in exact location of web page where one want and give top:50% and right: -15%. It displays the selected elements -15% from the right and 50% from the top of MainDiv.

HTML and CSS part of the slider is completed. Let’s move on the jQuery part.


(function($) {  // It will prevents all events to run before completely finished loaded document page
	
   var slider = $(".slider ul"), // First thing find the selector.
   imgLen = slider.find("img").length ,     // How many images currently shows in the slider
   imgWidth = slider.find("img")[0].width,  // Width of first Image in the slider
   totalImageWidth = imgLen * imgWidth, // width of Total Images in the slider
   current = 1,  // Keep current Image index(default it is 1)
   loc = 0 ; // Keep current location of image is 0px (default it is 0px) 
		
		
var button = $("#slider-nav").show().find("button").on("click",function() { // click on any button
	    
  var direction = $(this).data("dir"); // find the direction of clicked button (prev or next)
   (direction == "next")? ++current : --current; //If it is true increase the value of current.
   loc = imgWidth  ; // update current Image location
	    
    if(current == 0) {  // if it is true
       current = imgLen;  // set last image to current image.
       loc = totalImageWidth - imgWidth; // update current location of current Image.
       direction = "next"; //set direction to next.
		
   } else if(current-1 == imgLen) {  //if it is true
			    
      current = 1; // set first Image to current Image.
      loc = 0; // update current location of current Image.
      direction = "prev" ; //set direction to prev.
   }
		  
transition(slider,loc,direction);  //animate the left or right margin of the sliders list with the values.
}

function transition(slider,loc,direction) {
  var unit ;
    (direction == "next") ? unit = "-=" : unit = "+=";  // animate the slider with += loc or -= loc
   
  slider.animate
({
		marginLeft : (loc != 0 ) ? unit + loc : loc  //animate the slider to left or right
	})
});
});
(jQuery)

Summary

  • Create a HTML snippet,set position of element to relative,add navigation buttons using #slide-nav.