How to Make your Own Slide Show Using JQuery (A Simple One)

Share

First of all you will create the html structure of the images that will rotate in the slideshow as i created as follows

[code lang=”html”]

[/code]

in this html structure the div that contain the images can contain anything that you want to rotate in the slides. it depends on your skills when you use this in the php then you place a loop there. but now it is html so we will discuss only html here.

After this we will go for some css that will effect the silde show,

[code lang=”css”]
#slideshow-area, #slideshow-scroller {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

#slideshow-area {
border: 1px solid #000;
}
#slideshow-holder {
height: 500px;
}
#slideshow-previous, #slideshow-next {
width: 50px;
height: 50px;
position: absolute;
background: transparent url(“prev.gif”) no-repeat 50% 50%;
top: 225px;
display: none;
cursor: pointer;
cursor: hand;
}

#slideshow-next {
display: block;
background: transparent url(“next.gif”) no-repeat 50% 50%;
top: 225px;
right: 0;
}

.slideshow-content {
float: left;
}
[/code]

if you are gud in css then you understand this, as its so best online casino easy one for those who understand css.

At the end the main thing is the script that will run the slideshow.

[code lang=”js”]
var totalSlides = 0;
var currentSlide = 1;
var contentSlides = “”;$(document).ready(function(){
$(“#slideshow-previous”).click(showPreviousSlide);
$(“#slideshow-next”).click(showNextSlide);var totalWidth = 0;
contentSlides = $(“.slideshow-content”);
contentSlides.each(function(i){
totalWidth = this.clientWidth;
totalSlides ;
});
$(“#slideshow-holder”).width(totalWidth);
$(“#slideshow-scroller”).attr({scrollLeft: 0});
updateButtons();
});
function showPreviousSlide()
{
currentSlide–;
updateContentHolder();
updateButtons();
}function showNextSlide()
{
currentSlide ;
updateContentHolder();
updateButtons();
}function updateContentHolder()
{
var scrollAmount = 0;
contentSlides.each(function(i){
if(currentSlide – 1 > i) {
scrollAmount = this.clientWidth;
}
});
$(“#slideshow-scroller”).animate({scrollLeft: scrollAmount}, 1000);
}

function updateButtons()
{
if(currentSlide < totalSlides) {
$(“#slideshow-next”).show();
} else {
$(“#slideshow-next”).hide();
}
if(currentSlide > 1) {
$(“#slideshow-previous”).show();
} else {
$(“#slideshow-previous”).hide();
}
}
[/code]

here are the function of the Script that will work in the slideshow, when you click on the next or previous image that were added by the use of css. the slideshow will work smoothly.
and the last on e important thing that you should know when you working with scripts in jquerry.
add the jquery libraries in you header section of the file by placing the following line in you header

[code lang=”html”]

[/code]

if you not add the last code in your any script the script will not run.
Hope you understand this, there may also b more tutorials about this, i found this one is easy among them all so i shared it !
© 2018 IT Tech Developer | XML Sitemap | HTML Sitemap
Powered by T-Developers | Designed by: Shah Rukh | Thanks to Friends
show
 
close
rss Follow on Twitter facebook linkedin youtube google+ email