Website Design Above the Rest
Web Developer Website Design stumbleupon Website Design digg Website Design Facebook

The Blog

Blog Categories

Very Simple JQuery Slideshow

Simple slideshow call to actionView the Demo

We start by adding the most recent Jquery into your header. Lets use google hosted jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

Then onto the proper markup. We want to keep it very simple.

<div id="WM_slideshow">
    <img src="img/slide1.jpg" alt="slideshow" class="active" />
    <img src="img/slide2.jpg" alt="slideshow" />
    <img src="img/slide3.jpg" alt="slideshow" />
    <img src="img/slide4.jpg" alt="slideshow" />
</div>

 

We then want to add some CSS to only show the "active" slide, and hide the others using a lower z-index.

#WM_slideshow {
    position:relative;
    height:350px;
}

#WM_slideshow img{
    position:absolute;
    top:0;
    left:0;
    z-index:5;
}

#WM_slideshow img.active {
    z-index:7;
}

#WM_slideshow img.last-active {
    z-index:6;
}

 

Then this amazing Jquery function.

<script type="text/javascript">

function
WM_slide() { var $active = $('#WM_slideshow img.active'); if ( $active.length == 0 ) $active = $('#WM_slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#WM_slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); }

</script>

 

Then once the DOM is ready, execute at set intervals. In this case, every 4 second.

$(function() {
    setInterval( "WM_slide()", 4000 );
});

View the Demo