Slideshow Script

This super lightweight (1.5KB) and standalone sliding slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

The first parameter taken by TINY.slider.slide is the variable name used for the object instance. You can also optionally set width and height parameters for the applicable direction you are sliding. If it is not set the width or height will be automatically calculated using the offsetWidth/offsetHeight of the first list element. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

12/8/2009 – Fixed bug that threw slider into loop outside of constraints.

Posted by Michael in JavaScript on December 6, 2009

93 Responses

Nice, just was I looking for! Is this cross-browser? (works in IE too)?

Edmundo Junior on December 07, 2009 at 12:31 am

@Edmundo – Yes, it works in IE6 and up.

Michael on December 07, 2009 at 7:40 am

I really like your work : simply to use, but always highly capable !

stip on December 07, 2009 at 1:13 pm

Great script. Congratulation. Clean & easy. Just: would it be possible to add a function to stop the slideshow on roll-over, so people can read the text ?

Olivier on December 08, 2009 at 2:45 am

Nice !

I experienced a little pblm of script self-decided lightning pic rotation (on FFox 3.5.5).
I'd be interested in a GWT wrapper for it (i'm a java user).

Congratulations

Jérôme

Wadaël on December 08, 2009 at 3:37 am

Great work Michael.

How about a table with configurable cells and expandable on interaction?
Cheers!

Andy Gongea on December 08, 2009 at 4:07 am

When you double click 4 (or the last opposite pagination number) it throws the whole slider out of loop.

Stephen on December 08, 2009 at 10:01 am

@Olivier – Sure it is possible. Post in the forum if you need it and I will take a look.

@Andy – Hey, you mean like you click on the cell and it becomes editable or what? Shoot me an email.

@Stephen – Thanks for the heads up, the issue has been resolved.

Michael on December 08, 2009 at 10:43 am

Wow nice work Michael, what else have you got in mind for a tiny javascript plugin? whatever it is i cant wait to see it!

Jaswinder on December 08, 2009 at 10:47 am

Wow this is just perfect for a project I am working on right now, thanks a bunch.

Arpit Jacob on December 09, 2009 at 6:49 am

Nice script, thanks very much.
I had a quick play, and would like to turn off the controls, so it can be slotted in to a page and just auto play, with just the images showing ?
all the best, Dave

Dave Porter on December 09, 2009 at 7:08 pm

Hi,
Very nice script.

Can you configure some how to have maybe 4 pictures visibile at a time and you can scroll to it as given in your example?

That would be great.

Thanks!!

Ben. on December 10, 2009 at 10:03 am

@Jaswinder – Lots of cool stuff, the TinySlider post has a number of them listed.

@Dave – Sure, all the navigation is optional.

@Ben – Definitely possible. You can either have one LI and pass a fixed with parameter (pass 400 and each li is 100px wide) or nest another UL inside the sections.

Michael on December 10, 2009 at 10:14 am

Hi, thanks for your reply.

Sorry, Im not really good in JS. How can I pass the width parameter? I need to do it via CSS (the li width)?

I will play around a bit but I am not sure what you mean.

Thanks for your help!

Ben. on December 10, 2009 at 2:54 pm

@Ben – Like the other parameters.

var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
width:500,
etc.
});

Michael on December 10, 2009 at 4:19 pm

Hm, cant get it to work. Either it stops sliding at all or shows a big white part.

What a pitty. I wanted to have 3 pics displayed at a time and scroll one left or right but stopping when the last picture is displayed.

Ben. on December 11, 2009 at 3:03 am

@Ben – Can you post a link on the forum and I will take a look? Thanks!

Michael on December 11, 2009 at 8:37 am

Michael, great technique! Just one question: is it possible to vertical and horizontal align an image inside of the #slider in order if it will be bigger than the width and height it will show the middle point of the image?

LSJack on December 13, 2009 at 4:33 am

Still one problem. When using Tinybox with TinySlideshow inside the new popup it doesn't work. Is there a way to change some parameters at Tinybox or TinySlideshow to achieve it? Best regards!

LSJack on December 13, 2009 at 6:56 am

first of all i love your stuff, and i feel bad posting this because it seems unappreciative. I really like this gallery but after implementing it, I've decided that it would be the coolest gallery on the net if it was xml based and had a pause button :)

GiDesign on December 13, 2009 at 7:19 pm

@LSJack
Had the same problem with this and tiny divscroller opened the slideshow script.js file in notepad++ and changed on line 1 "var TINY={};" to "var TINYSLIDE={};" and on line 6 TINY.slider=function(){" to "TINYSLIDE.slider=function(){" and now they play nice. Obviously you have to initialize with "TINYSLIDE.slider.slide" now

Kris on December 14, 2009 at 7:04 am

Is it possible to have thumbnails, as with your previous TinySlideshow?

j-roc on December 15, 2009 at 10:52 am

@LSJack – Sure you would need to get the width and height of the image and then add half the difference from the parents width and height to the top and left respectively. Padding would make the most sense. Post on the forum your question about the TinyBox/TinySlideshow integration with a link and i will help you out. Just did that recently.

@GiDesign – If you want a pause button request it on the forum and I will get one to you there. As for XML, I don't see myself doing that but XML parsing might be a good topic to blog about.

@j-roc – Sure, it is just an unordered list so put anything inside the LIs that you want.

Michael on December 15, 2009 at 11:00 am

Great work, I like the script. Is it possible to slow down the slide effect? I checked the source but couldn't find any value.

Simon on December 17, 2009 at 5:28 am

Michael,
Good Night!

Thanks for the script, very good! But I have a doubt, I would like to reduce the speed between an image and another. It would be possible? How do I? Thank you!

Rodrigo Pellegrino on December 20, 2009 at 11:13 pm

I would love to be helped, I applied this slider to my project and was very good, the only thing I need to do and slow down.
Thanks for your help!
Sorry anything!

Rodrigo Pellegrino on December 20, 2009 at 11:44 pm

Michael, great script!
I've read that XML based is not something you would be interested in…how this images load? All of the at once?
Any option of having thumbnails y I already have the script to create them?

Thanks!!

Dani on December 22, 2009 at 1:05 pm

Can this TinySlider fade in and out? How?
Thanks

jazzi on December 23, 2009 at 12:53 am

Many thanks for the code – flexible and works very well – just what I needed for the home page of my website (www.findeatdrink.com).

Nick on December 28, 2009 at 10:24 pm

great work
i have a question : can I setup the speed for the slide effect ?
thx

stoff on December 30, 2009 at 8:46 am

Michael,

Thanks for the script, very good! But I have a doubt, I would like to reduce the speed between an image and another. It would be possible? How do I? Thank you!

Rodrigo on January 04, 2010 at 12:40 am

Thanks for your great work!
I have some trouble on my page. When my page was large, it dosen't worked well in Chrome and Safari. I think their js engine is too quick, and your script get the wrong value before the whole page was download. So I have to move the script to the end of page, and it's worked. But I don't like that Is there any other solutions？

Yu on January 06, 2010 at 2:18 am

The problem was caused by my mistake. When the css link placed before the script link, it works well. Thanks for your work again!

Yu on January 06, 2010 at 2:41 am

Very nice!!

I have a small problem in Mozilla Firefox 3 : If I put a flash content in a slide, I have a bug. Where I go to the next slide, I see the flash content out of the slideshow.

Please help… Thankx :)

niss on January 06, 2010 at 4:26 am

For your informations the flash bug can be corrected by adding this into the object tag :

<param name="wmode" value="transparent" />

and this into the embed tag :

wmode="transparent"

Hope this will help.

niss on January 06, 2010 at 5:03 am

amazing script..thank you

denbagus on January 10, 2010 at 8:18 pm

hi great stuff thank you I'm using it.. but how do I change so slide is reset… rather than reversing…?

jay on January 15, 2010 at 7:33 pm

kind of a newbie when it comes to CSS, but I am wondering how to center this script in a 800×600 website?

It appears to have more dead space on the right side of my page as oppose to the left

Sorry for the basic question!

Tim on January 21, 2010 at 9:26 am

this is really cool, it works great for my application though I have a small problem… for some reason the entire table floats left and when I drop it into a page it shoves everything on the page to the far left… please help, and thanks

Tim on January 27, 2010 at 11:05 pm

Your javascript is excellent and it is perfect for a website I am in charge to do.
I understand you stated that its license is creative commons license which implies that the any derived work (like the javascript I am currently working on) must akwnoledge your contribution.
Can you tell me how to do this ?
Do you expect us to acknowledge you through the website or will it suffice to put a comment on the header of our .js file that says that it contains some work derived from your TinySliider.

Many thanks in advance

Henry Clayton on January 29, 2010 at 7:35 am

I love this script it really added a nice touch to my site, thanks!

Web Developer on January 29, 2010 at 2:28 pm

Hi Michael,

I wish to add this in my website..I want to confirm,will there be any copy right issues with this code integration.

Please reply ASAP

Web Developer on January 30, 2010 at 12:47 am

Hi,

Really nice javascript. I'm a beginner… so maybe somebody can help me.
Where do I have to put in the mentioned code above? What else do I have to do to get running the slideshow?

Thanks a lot!!

TIMIT on February 01, 2010 at 5:06 am

Great script Michael! I'm playing around with implementing it on my site and wondered if I set resume = false and interupt the transition, is there a javascript command that I could call via a link to resume the slide?

Cam on February 01, 2010 at 4:44 pm

nice java script slide show ,

ruby on rails company on February 03, 2010 at 4:22 am

Currently it looks like the slide show is rewinded backwards after the last slide is shown and when the slide show is resumed. It would be a nicer visual effect if the transition from last slide to first slide would be the same as going from first slide to second slide, in order to create the illusion of an 'endless loop'.

nlstart on February 09, 2010 at 5:14 am

this post is good, and this blog is good too! well done dude!!!

stackey on February 13, 2010 at 3:39 am

Hi. This really helps me but I want to apply the information bar too, the one that can be found here: http://sandbox.leigeber.com/javascript-slideshow/ I just don't know what code to add. Thank you.

Christine on February 13, 2010 at 7:48 am

Hello,

I would like to know if you could share your background psd, because i wish use your script with a larger background.

Thanks for your job,

Morgan on March 06, 2010 at 11:31 am

Does anybody know how to make these slides load randomly rather than in sequence?

Many thanks!

Alec Rust on March 11, 2010 at 11:01 am

nice job, work perfectly with mozilla, but sorry i can't make it working with IE, is there some security to unlock or something else to make it right.

thanks in advance

stef on March 12, 2010 at 4:52 am

Good job dude!! It seems interesting, all i need to do is slow down the speed little bit.

priya on March 19, 2010 at 11:59 pm

Great technique, keep sharing some more information related to this..

web on March 20, 2010 at 12:00 am

I would like to know if you could share your background psd, because i wish use your script with a larger background.

akash mistry on March 24, 2010 at 7:14 am

Greetings,

I have a problem when include the principal div content into a table in IE7. The pictures don´t move but no present errors, help me please.. Example
.table.
.tr.td.
code here .. div id.wrapper .. etc.
.|td.|tr.
.|table.

In firefox work perfectly, thank's for this work.

mrkents on April 09, 2010 at 5:13 pm

left and right hover arrows don't work in IE6.
Can we make them inside slider? as in slideshow?
I've implemented pause as it was written in forum. Pause works 1-2 times, and after it I try to click arrows, buttons, TinySlider begins scrolling images madly. Is this because I have images of different size? Besides, I'd like to center my images. how can I do it?

bestann on April 22, 2010 at 9:34 pm

Sorry. Arrows work in IE, but their style doesn't change (background color of arrows). Maybe because of CSS.

bestann on April 22, 2010 at 9:38 pm

for those who want to remove the too global :
"* {margin:0; padding:0}"
you just need to add margin:0; padding:0 in '#slider ul'
(margin:0 is needed for I.E 7 (at least), padding=0 is sufficient for chrome or FF)

laurent debricon on April 29, 2010 at 6:21 am

Just one question.

I want to have another html page with links to exactly poistions to the html page with the tiny slider in it. Can i do that?

I test some things like anchors in the list of the slider or to remove the position:0 or to put onclick events to another page links, but didn' t work.

I hope u understand. Thanks anyway and your work is great!

panx on May 12, 2010 at 4:45 am

I needed this, thanks.

Thomas Mosey on May 14, 2010 at 10:21 am

for those who want to remove the too global :
"* {margin:0; padding:0}"
you just need to add margin:0; padding:0 in '#slider ul'
(margin:0 is needed for I.E 7 (at least), padding=0 is sufficient for chrome or FF)

Bruce on May 19, 2010 at 9:11 am

very nice..!I like it and Thank you!! ^_^

Rukai on May 28, 2010 at 7:35 pm

This script is very good, but the problem is it does not work when javascript is not activated. (13% of computers.)

it is very important to let the link active even without js. to change photos.
I will do it when I have time and send you my add-on if you want.
congratulations, anyway, your script is very good.

maxx on May 29, 2010 at 4:10 am

Thanks Michael!
I am using your script in a couple of my sites. I am running into several issues.

1. Do you have a version of the code that has descript variable names? I know the short names keeps the script size down, but it's really hard to try and debug or extend the script with the cryptic names.

2. When there is just one image configured in the slide show, then the description cycles up and down continuously. Can you point me in the right direction to fix that?

3. When there are fewer thumnails than would be required to fill the thumnail slider at the bottom of the slide show, then the thumnails will slide all the way off the left side of the thumnail slider.

4. I have users that aren't savy enough to resize their photo's to the correct size for the large image display. Is there a way to have the javascript re-size the image to fit the display if the user uploads one that is too large?

THANKS
MIKE

Michael Tayler on May 31, 2010 at 3:15 pm

Wow!! this is an amazing slider which is really light weight and looks good. Best of all is that its free and easy to customize. I will use this in my new website development in kildare. Such sharing of resources helps in real advancements pretty fast.

Thansk to the coders who create it and give it for free.

website development in kildare on June 06, 2010 at 12:30 am

Great script, is it possible to show say 4 images above each other then they scroll up as below

1 -> 2
2 -> 3
3 -> 4
4 -> 1

This would be great if it could be done?

Richard Chambers on June 07, 2010 at 2:33 pm

I am new to web development and have just come across your slideshow, which looks great. However I cannot get my own images to display, even if I resixe them the same as the sample images and give the same name, they do not work?

The only way I have found to get them to display is to open one of the sample images, paste my images over the top and resave.

Any help would be greatly appreciated.

Thanks

Steve on June 30, 2010 at 3:44 pm

Great work, really inspiring to see how powerful vanilla can be! My install of this it is running extremely sluggish within the rest of my page (your demo runs great though). The images I am using are quite a bit larger and I am not sure if that has anything to do with it. Safari runs it well but IE and FF the transition is jerky and slow. Anyone else experienced this?

zzz on June 30, 2010 at 9:22 pm

Thank you for this excellent slideshow.
I would like to add text on images and I don't how to do this.

Any help would be greatly appreciated.

thanks

Faouzi

Faouzi on July 06, 2010 at 8:47 am

hi ,anyone can help me out it is not wokring i have added to my site ?

Thanks .

Vj on July 07, 2010 at 2:28 pm

Great slider, much better than others that are available! Thanks for this.

Luke S on July 15, 2010 at 1:51 am

se pueden colocar 3 tiny slider en una misma pagina?

mel on July 15, 2010 at 2:35 pm

Wow this is just perfect for a project I am working now thanks a lot.

Manali on July 19, 2010 at 6:41 am

Great Script Thanks for posting

Seo Services Delhi on July 22, 2010 at 6:22 am

Hello Michael
Thanks a lot for sharing this great script!
Greetz from Switzerland
Designerist

Designerist on July 25, 2010 at 5:04 am

Thank You
___________________________

NE MUTLU TÜRKÜM DİYENE

Osmanlı Torunu on August 10, 2010 at 11:31 am

I want to change the select method from "on click" into "mouse over".
But your JS file look difficult for me. May you help?

Also, is it possible to add on hover pause swap? Thanks!

Sonic on August 20, 2010 at 12:56 am

Is there a way to change the numbers to words like with simpleshow?

Web Development Kent on August 20, 2010 at 4:08 am

Nice light script, Thanks for share. LT

Lisa Thomason on August 25, 2010 at 12:07 pm
Comments are closed at this time.