Slideshow Script – TinySlider

Javascript 128 responses so far

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.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

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

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

  • stip

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

  • 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 ?

  • 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).



  • Great work Michael.

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

  • Pingback: TinySlider - JavaScript Slideshow in 1.5KB |

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

  • @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.

  • 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!

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

  • Dave Porter

    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

  • Pingback: TinySlider: Lightweight JavaScript Slideshow Ajax Help W3C Tag()

  • Ben.

    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.


  • @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.

  • Pingback: TinySlider Slideshow | BeWissi - Aportando a la web con Guías, Informaciones útiles()

  • Ben.

    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 – Like the other parameters.

    var slideshow=new TINY.slider.slide('slideshow',{

  • Ben.

    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 – Can you post a link on the forum and I will take a look? Thanks!

  • LSJack

    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

    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!

  • 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 🙂

  • Pingback: TinySlider – Super lightweight slideshow script()

  • @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

  • j-roc

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

  • @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.

  • Simon

    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.

  • Rodrigo Pellegrino

    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

    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!

  • 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?


  • jazzi

    Can this TinySlider fade in and out? How?

  • Pingback: TinySlider — un diaporama léger en Javascript » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP)()

  • stoff

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

  • Rodrigo


    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!

  • Pingback: Heti események | I build websites()

  • Yu

    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

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

  • niss

    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

    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 :


    Hope this will help.

  • jay

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

  • Tim

    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

    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

  • Henry Clayton

    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

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

  • Web Developer

    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



    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!!

  • Cam

    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?

  • 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'.

  • stackey

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

  • Hi. This really helps me but I want to apply the information bar too, the one that can be found here: I just don't know what code to add. Thank you.

  • 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,

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

    Many thanks!

  • stef

    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

  • priya

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

  • web

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

  • akash mistry

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

  • 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
    code here .. div id.wrapper .. etc.

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

  • bestann

    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

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

  • laurent debricon

    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)

  • Pingback: Creating a Content Slider for Wordpress using TinySlider « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates()

  • Pingback: 使用TinySlider为Wordpress创建幻灯片 — 老孙博客--Lao Sun's Blog()

  • panx

    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!

  • Pingback: Top 10 Images Slideshow Scripts()

  • 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)

  • Pingback: AddaZ | Blog | Creating a Content Slider for WordPress using TinySlider()

  • Pingback: 139 Ressources Javascript et jQuery()

  • Rukai

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

  • maxx

    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.

  • Pingback: Creating a Content Slider for WordPress using TinySlider | PIXEL SHOP()

  • 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?


  • 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.

  • Richard Chambers

    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?

  • Pingback: Slideshow Script – TinySlider « Createlo()

  • 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.


  • zzz

    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?

  • Faouzi

    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.



  • Vj

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

    Thanks .

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

  • Sonic

    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!

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

  • Great thinking about globalization issue,Thanks. <a href="">sgwebDesigning</a&gt;

  • Sweetz_410

    how to remove the slide transtion? thanks!

  • Yuda

    Is it possible to add play/pause function so when mouse is hovered the slide stops and will resume when the mouse is away

  • Govee

    Can you please show me how to add caption to the slides as well, if it's in fact doable?


  • Rachel

    Hi there,

    I'm just wondering if anyone knows how to add multiple instances of this slider to a single page?
    I am trying now but kinda stuck!


  • Anonymous

    var slideshow=new TINY.slider.slide('slideshow',{

    var slideshow2=new TINY.slider.slide('slideshow2',{

  • Anonymous

    You can put whatever you want there, it is not built by the script for that very reason.

  • Rachel

    That isn't working 🙁
    Have you had 2 instances working before?
    Would it be possible to post your code on here so I can see where I'm going wrong?


  • Anonymous

    Send me a link using the "contact" at the bottom of this page.

  • Rachel

    i got that working – it was because i didn't want paging on the second instance but i hadn't removed that line from the javascript.

  • Mathieu

    Hey everybody,
    I would like to know how is it possible to add a link into the photos

  • Thanks very much for a fantastic slider, I've got it working perfectly inside the home page on a new WordPress site I'm doing using the Mystique theme, took a little tweaking the css but all working great now, nice and light too, cheers Warren 🙂

  • You'll need to change these tags

    <img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" />

    to this so they are wrapped in the a ref tag

    <a href="put your link here"><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></a> and obviously replace "put your link here" with your link.

    Warren 🙂

  • Pia Miranda

    Hello. Is there an option to change the speed of the slide?

  • Dave

    Thanks for a great slideshow. I use it on a number of sites that I look after.

    However, I've found that it does not work on iOS (so iPhone / iPad) if the images are stored in a folder that has a number for a name e.g. /photos/123/.

    Adding an alphabetical prefix solves the issue.

  • Richard

    Is there a way to pause the slider on mouse-hover?

  • Richard

    Is there a way to pause the slider on mouse-hover?

  • Smart Team

    You can use of this slideshow, it have that option.

    Wow, a FREE Slideshow Maker Service for Web APP,can use it for ANY web APP, even WordPress, PHP-Nuke, Joomla, DotNetNuke, Magento, Drupal,…, ANY website and ANY weblog Themes. a sample use available in download files.———————————————-WHAT IS DOLPHIN SLIDESHOW MAKER ? Dolphin Slideshow Maker is a powerful and perfect slider service made for web designers. With Dolphin SlideShow, you can organize any type of web content into a beautiful and user-friendly slider. Benefits:    *Saves Development Time    *Beautiful Default Design    *Powerful Features & API    *Diligent Support———————————————-Main Site :,FREE LICENSE version : LICENSE version : Tutorials : Preview Demo Login: adminPassword: admin

  • hi

  • Uptown

    can anyone help me with the coding. i have a site going but im having trouble getting this on my site with out changing everything that ive already done

  • Uptown

    LOL really embarrassed by this LOL …. maybe its something simple that im over looking but … how can a get this in its own div container on my site so it doesnt disrupt the rest of my design. i can get it on there if i take EVERYTHING else off of my page. but if i strip away everything i dont need out of the code provided it just doesnt work at all … no slide no nothing.  can someone spare a few minutes to help me??

  • Plianeta Sedi

    it's wonderful. congratulations to the author

  • ATKA-Soft

    Yes, there is option, just go into the file: 'script.js' to line 21 and change the number to whatever you want.

    (The number is the time in miliseconds)

    Hope i Could help you 🙂

  • ATKA-Soft

    The slider is really amazing, but is there a way to change the size of the slideshow, and what do i have to do, to change the size ?

    I hope you help me.

  • Matheus

    Is that possible to pause the animation using a button? and then resume it using using same button (Play/Pause)

  • Grace Scott


    I had the script working perfectly with images yesterday. For some unknown reason – it seems to have stopped :S

    Below is the code i am using…

    <link rel="stylesheet" type="text/css" href=""/&gt;
    <script type="text/javascript" src=""></script&gt;
    <div id="wrapper">
      <div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
      <div id="slider">
        <li id="content">
         <h1>TinySlider – Simple JavaScript Slideshow</h1>
         <p>This super lightweight (1.5 KB) sliding JavaScript 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).</p>
        <li><img src="; width="500" height="300" alt="" /></li>
        <li><img src="; width="500" height="300" alt="Coral Reef" /></li>
        <li><img src="; width="500" height="300" alt="Blue Fish" /></li>   </ul>  </div>  <div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div> </div> <ul id="pagination" class="pagination">  <li onclick="slideshow.pos(0)">1</li>  <li onclick="slideshow.pos(1)">2</li>  <li onclick="slideshow.pos(2)">3</li>  <li onclick="slideshow.pos(3)">4</li> </ul></div><script type="text/javascript">var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', auto:3, resume:true, vertical:false, navid:'pagination', activeclass:'current', position:0});</script></body></html>

    Also, instead of images I'd like include text as the first slide is displayed… any ideas? I'm a novice to coding to be honest.

    Any help would be massively appriciated.

  • If you want Tinyslider with .webp image Google extnesion, please Go to this link:

  • Metanormal

    You should be able to use a <div style="overflow:hidden"> around your animation

  • 河山 邵


  • Jochem

    Great script, although I ran into a problem, the image seems to be displaced about 100px to the right, this might be caused by the structure of the site being build up with tables? Help is appreciated! The site is:

  • Jochem
  • Selenechn

    The script works great. But in IE 7, it breaks, any idea about how to fix that?

  • Rajesh vaishnav

    when i am using two slider (tiny slider) in a one html page it conflict please suggest me solution

  • Raul

    thanks for this exellent work is very useful and a clean and nice code and lite code thanks thanks thanks

  • Great script! But it doesn't seem to be working properly in IE8. It just displays a static image. Tested and works fine in Firefox, Chrome, and Safari. Is there some kind of fix for this that anyone's found?

  • Guest

    Please advise on how to change the script so that when it reaches the last item it goes to the start without rapidly backwards scrolling through the entire list.

  • adumpaul

    Nice article.Thank you for sharing.

  • Thanks for a great slideshow. I use it on a number of sites that I look after.

  • It doen't work hand in hand with JQUERY 1.7.1… 

  • Anonymous

    anyway how could i slow the move…..

  • Alperhasret

    how can i add more photos ?

  • Shiva

    It is informative and useful for me…..
    Thank you…

  • Somebogusemail

    Thanks 100% for this script. There are loads of slider scripts out there and this is the one that caught my eye first and worked first time. Then I had to manipulate it to fit the site I am working on and after some trial and error I managed to do the following :

    Change the overall size
    Change the border colors
    Change the image size
    Move the buttons and replace them
    Add more imagesChange the rate it changesGotta say thanks to you for this !!! and thanks for the support below from yourself and others. 

  • Tim

    the new version doesnt have the thumnails like the old version had – but the old version glitches in IE

  • gobes

     Very great slideshow. Easy to use, very light, everything you could want for a simple slideshow!

  • Maikeruqt

    this was an awesome script that im looking for!  but can somebody help how can i  put an image or a logo on top of this slideshow?