Easy, Breezy jQuery Slideshow

I thought I would share my starting point for all slideshows that I create for clients and myself.

There are a million good reasons to use a jQuery plugin, but none of them are the right ‘weight’.   If you begin with your own code, you’re not going to be limited later on.

Let’s start with our unordered list of images:

<div id="slideshow">

	<ul>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/persiannewyear11-hp.jpg" alt="persiannewyear11-hp" /></a>

		</li>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/holi11-hp.jpg" alt="holi11-hp" /></a>

		</li>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/sayeddarwish11-hp.jpg" alt="sayeddarwish11-hp" /></a>

		</li>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/okamoto11-hp.jpg" alt="okamoto11-hp" /></a>

		</li>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/eisner11-hp.jpg" alt="eisner11-hp" /></a>

		</li>

		<li class="slideshow_item">

			<a href="#"><img src="http://www.google.com/logos/2011/jfkinaugural11-hp.jpg" alt="jfkinaugural11-hp" /></a>

		</li>

	</ul>

</div>

Next we need to style the slideshow:

#slideshow{

    position:relative;
    top:0;
    left:0;

} #slideshow ul, #slideshow li{

    margin:0;
    padding:0;
    list-style-type:none;

} .slideshow_item{

    position:absolute;
    left:0;
    top:0;
    list-style-type:none;

} .slideshow_item img{

    margin:0;
    padding:0;
    vertical-align:bottom;

}

And finally we need to make it all work with jQuery:

/* home slide show */

var slide_pos = 0;
var slide_len = 0;

$(document).ready(function() {

    slide_len = $(".slideshow_item").size() - 1;

    $(".slideshow_item:gt(0)").hide();

    slide_int = setInterval(function() {

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeOut(2000);

        slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeIn(2000);

    }, 5000);

});

And here’s the final result:

Click here to view at jsFiddle.

Comments

Apr 14, 2011
2:06pm

Tom says:

That's a really beautiful slideshow. Good job!
Apr 14, 2011
2:09pm

jhatweb says:

Thanks! I do have to mention that it's all Google's designs, just my code :)

Post a comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


four × 1 =