Description
Follow the below steps to prepare HTML and CSS mark up.
Step - 1
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.
[html]
<div class="MainDiv">
<div class="slider">
// holds the all slider images
</div>
<div class="slider-nav">
// holds the navigation buttons
</div>
</div>
[/html]
CSS for MainDiv
[css]
* {
margin:0;
padding:0;
}
.MainDiv {
position:relative;
width: 600px;
margin: 100px auto 0;
}
[/css]
Step - 2
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.
[html]
<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>
[/html]
Step - 3
Now, write CSS for
slider.
[css]
.slider {
width: inherit;
height: 300px;
overflow: hidden;
}
.slider ul {
width: 10000px;
list-style: none;
}
.slider li {
float: left;
}
[/css]
Step 4
Create two navigation buttons. One is prevButton and another is nextButton to control the jQuery Slider. The
#slider-nav holds the navigation buttons.
[html]
<div id="slider-nav">
<button data-dir="prev" id="prev">Previous</button>
<button data-dir="next" id="next">Next</button>
</div>
[/html]
CSS for #slider-nav.
[css]
#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%;
}
[/css]
Step 5
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.
[javascript]
(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)
[/javascript]
Description
- Create a HTML snippet,set position of element to relative,add navigation buttons using #slide-nav.