Simple jQuery Slider
There are many jQuery sliders in the internet but many of them are really hard toξunderstand. This slider is very basic and very easy to change to your specs. Just change the fade effect to the one of your preference and you are set. You can find more information about the different functions at the jQuery website, they have a lot of helpful information there.
Here is the css that you will need to attach:
#slideshow { position:relative; height:323px; z-index:-9999; max-height:323px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; }
#slideshow IMG.active { z-index:10; }
#slideshow IMG.last-active { z-index:9; }
Here is the code for a simple jQuery slider, add this to a .js file and attach it to the page where you will have your slider. However you have to be sure to attach the main jQuery file before this one. I have created this from scratch and used it in many client websites. All you have to do is to put the images on a div with an id and class of ‘slideshow’.
var mainInterval;
var started = false;
var count = 0;
$(function(){
$('.slideshow img:gt(0)').hide();
function init() {
if ( started == false ) {
mainInterval = setInterval(function(){
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');},
5000);
}
}
$('#nextSlideShow').click(function() {
count++;
clearInterval(mainInterval);
init();
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');
});
$('#backSlideShow').click( function() {
count--;
clearInterval(mainInterval);
init();
$('.slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slideshow');
});
// Stop The Slide Show
$('#stopSlideShow').click(function() {
clearInterval(mainInterval);
started = false;
});
init();
});
Here is a sample of how the HTML will look like:
<div id="slideshow">
<img src="./images/free-simple-slider.jpg" alt="jQuery Slider First Image" />
<img src="./images/working-this.jpg" alt="Slider Image 2" />
<img src="./images/thisWouldBeAnotherImage.jpg" alt="Slider Image 3" />
</div>
You can also add a stop, back and next button if you like just use an id of ‘stopSlideShow’ for the stop button; an if of ‘backSlideShow’ for the back button and an if od ‘nextSlideShow’ for the next button.
I hope that this jQuery slider helps you in your project and please leave me any questions or comments down below and I will be more than happy to answer them!
