I have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.
Update: There is a updated version of this article at Simple Image SlideShow using jQuery
I thought of making an attempt at a real simple SlideShow script using jQuery. Here’s what I came up with 5 lines of jQuery code. The images have been added to a ‘images’ folder kept at the root. The images has been defined in an array which can be retrieved from a server. For simplicity sake, I have harcoded the images paths, however the script functionality can adapt dynamically to the number of images in the array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slide Show with jQuery</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
var imgs = [
'images/emo.jpg',
'images/icon068.gif',
'images/icon260.jpg'];
var cnt = imgs.length;
$(function() {
setInterval(Slider, 3000);
});
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
});
}
</script>
</head>
<body>
<img id="imageSlide" alt="" src="" />
</body>
</html>
The code is not perfect but will give you an idea of how to extend this sample to suit your own requirements. You can see a Live Demo here.
Tweet
About The Author
34 comments:
On your demo page you probably should put a message to say it might take a few moments to load, I almost closed it after staring at a blank page figuring something was horribly broken
Thanks for your comments Chris..Will keep that in mind
Wouldn't it be simpler to not hard-code the images in the script so that I wouldn't have to wonder how to edit the script so that it dynamically changes to the number of images in the images folder...
One Comment then a few Questions
Comment: Thanks a lot! I've been looking for a simple slide show.
Question1: How do I modify your code to force my images to auto center on the web page?
Question2: How can I force the slide show to stop after one full cycle?
Question3: How could I modify your code (or add code) to force this slide show page to redirect to another page when one slide show cycle is complete?
Can you assist?
It does not work!
It doesn't show the images.
It is not working!!
Did you check the demo? It does work. Just wait for a few seconds and the demo shows up.
It's Working ...
thnx
your code works perfectly for my project,my client almost went through the roof..
thanks so much!
looks good, but demo and my page both load with "broken image" icon. Is there a way to start with image?
Stevenearl: I have posted an updated version of this post over here http://www.devcurry.com/2010/03/simple-image-slideshow-using-jquery.html
It become blank before second image fadein.... previous images shold become base when 2nd imaeg is showing so white space can be not shown
Shaym check the updated link in beginning of article that the author has put
Thanks for the script.
Thank you very much...
pls if u give the idea to retrived images from my asp.net website with jquery from my sql server database dynamically
this code helped us a lot.. thank u so much.......
hi
how can i read the images from sql database and then view them in the image slider ?
Could u help please
Thanks
Thanks for the useful script. It is really helpful.
That Code is simple and very very cool!
Thanks!
thanks.. simple and good..
its really really simple and nice script, i really like this work, its so nice that for the beginners,
Thank you so much!
I just wanna know whether we could embed a close button on this slideshow?
Thanks
I had been looking for a simple and clean code. Thank you so much for posting!
Glad to hear that Rachita!
Thanks for posting this - I am a real newbie. Can you tell me more specifically how to get my images into the slideshow?
I want to know how instead of giving own images path i can use the dynamic path based on the user selection. I am doing code behind in c# and based on some calculation i am getting the image and i want to use that value to show the image, how can i pass the value from c# to jquery ?
Thank's for your simple code .
but image show in left corner...
i want to change the image to center of the web page with text alternate change with each image.need your help ..?
Thank you for the code, i wish i could add this text content.
Directions
My Images are on a server, not locally and often load 2-3 times (Chrome & Firefox) before doing next pic.Please advise.
Bill
New York
how to add imageslider tool in visual studio 2012
Thanks allot....
Actually I was searching for Image slider...
Many other website provides software...
I was really thankful
for the code of slider....
I am implimenting it on vilasdighe.in
gr8......thanks..its working very well
Nice slider and also i find another one simple slider jquery. Both Sliders are more useful.
http://tutstech.com/simple-slider-jquery/
Post a Comment