JavaScript Slider – TinySlider 2

Javascript 172 responses so far

JavaScript Slider

This full-featured and standalone JavaScript slider is easily configurable and visually customizable using CSS. It also clocks in at a tiny 3KB. Features included from the first version include automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal). Updates include more fluid motion, an elastic tween option, continuous sliding without rewind, and a couple other fixes/tweaks. It accepts any content and gracefully degrades when JavaScript isn’t available. Stay tuned for an updated TinyBox soon.

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
auto:4, // false for no automation else the number of seconds between slides
resume:false, // continue auto sliding after interruption
navid:'pagination', // ID of pagination UL
activeclass:'current', // active class for pagination
position:0, // initial position index
rewind:false, // toggle "rewinding", else the slides will be continuous
elastic:true, // toggle the bouncing effect of the slides
left:'slideleft', // ID of left nav, to cancel cursor selection
right:'slideright' // ID of left nav, to cancel cursor selection

The first parameter taken by TINY.slider.slide is the variable name used for the object instance. You can also manually set the width/height parameter for the applicable direction you are sliding. If it is not set the width or height will be automatically calculated using 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. Images are copyrighted by Warner Bros.

Click here for the demo.

Click here to download.

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)

  • That is a tiny slider without requiring the jquery library too. Thanks and bookmarked

  • That is a tiny slider without requiring the jquery library too. Thanks and bookmarked

  • Michael

    Very good


  • Gregory

    I want to see a TINY library! Something that can compete with jquery 😉

    * you know, just for fun… you do GREAT stuff, I want to see it all in a package

  • Good work!
    Not if it is a mistake, but when I click to go to the next image, don't continues automatically …

    I also think it's easy to do that automatically identifies the paging as it is somewhat repetitive

  • Anonymous

    I am not seeing that in my testing. Can you give me the details like browser/os etc? Thanks.

  • alican

    same here.
    Firefox 4 beta 9 /windows 7 64bit

  • Anonymous

    Oh, you mean it stops the automatic rotation? Not that it does not move when you click? That is because the resume parameter is set to false so it cancels the automatic rotation once interrupted. To continue the rotation that would need to be set to true.

  • Informative post, Thanks for sharing.

  • Joel

    bookmarked also. Thnx

  • still simple and look full stylish…awesome

  • Rob

    Nice script!!

    Feature request:
    Once you are on the very first or last slide, the arrows have a "deactivated" state, so the previous button is off if you are on the first slide and the next button is off when you are the last slide. Just a thought!

    Thanks again!

  • Superb language,interesting subjects ,i was subscribe this blog,so tell me when you update this blog.

  • Eliza

    can I make it fade not slide?

  • thank you very much for a cool JS effect, can you submit it on my JS library?

  • Erukha07

    wow! so much for js effect… I'm new in javascript.. but that's truly fantastic.. keep going guys.. I believe you are not just helping us.. you're inspiring us too.. thanks..

  • Amazing script. We might use it for one of our projects. Thanks.

  • shoelacie


    How can we use other transition effects? Like fade in / fade out?

  • This is really cool stuff and very compact. thanks for sharing and allowing the use of the code.

  • Glentropy

    This is a great script. Quick question, how do you resize the pane without screwing up the transition? I don't see any setting for that in the js. The problem is when I resize things in CSS, the panes get progressively offset.

  • Glentropy

    Actually nevermind…I'm an idiot. I was using CSS edit and the live update feature wasn't working properly.

  • TenaciousMC

    I really like this script. However, my images will not slide in IE7. Works fine in other browsers, including IE 8, but when I enable Compatibility View or IE 7 mode via Developer Tools, it stays stuck on the first image. Not sure what is going on.

  • KillerSneak

    Hi i really like this light weight and simeple setup for such a neat slider. I do how ever have a question. How can i have more than 1 slider on the same page?

    I need 2/3 sliders next to each other? I tried to get 2 next to each other but as expected only one slider will work. I hope you can enlighten me a bit on this.

    Thanks in advance.

  • I really like this script. It is light, compact and very simple to use. The slider really adds a lot of content or images in a tiny space. Love it..thank you!

  • Andrew J

    Yes please I really need this too! Have tried messing and no joy 🙁

  • This script is simply amazing. Very easy to use and it runs really smoothly. Recently, more websites are using these types of 'motion' since they're not as heavy as flash and still produces a pleasant effect

  • Great Script. Big thanks for the post

  • A153417

    I had the same problem. It seems you cannot place the slider in a table. I removed the table and changed it for a div and now it works fine, even in IE6 (!)

  • Prithubanerjee

    This script is simply amazing.

  • Sdfsfsdf


  • Mk1364it

    Your program is excellent! +++
    How do I change direction ?
    go right to left!~

  • Tiny slider 2, is an innovative new tool,which is easily configurable and clocks only 3 kb. Cant wait for the updated Tiny box.

  • TenaciousMC

    We're using a content management system where the component, containing this script within a DIV, is still nested inside a table being used by the master page template. Unless we do a complete overhaul where we'd use only DIVs (not foreseeable in the near future), I'm not gonna be able to make this work.

    Thanks for your help though!

  • Very professional! + + + 🙂

  • Govee

    Very nice!

    How do I add the "caption" text for each slide and can the caption slide as the picture slides as well?

  • you can also use a beautiful display by modal :(Combined with TinySlider 2)

  • Very nice! I've been looking for a very small footprint slide jquery plugin for my portfolio site. Thanks for making this!

  • Rachel

    I really need to get multiple instances of this slider on a single page too.

    Did you ever find a solution?


  • Laobringer

    My images are all shifted about 40 px to the right. Can anyone help me correct this?


  • Anonymous

    Add "padding:0px" to #slider ul

  • Christophe

    Very nice script !
    I found a little bug when I need to use list (<ul>) in the content. The content disapears when the loop comes back to the initial slide. Any idea to fix the problem ?
    Thanks !

  • ecommerce web developer

    Very nice post..Short, compact yet helpful!
    I was looking for a pluggin for my site.
    Thank you!

  • cam77

    Hey, I love this slider and think it's great. I'm having one problem with it that hopefully someone could help me with. The slider seems to create this very long vertical div forcing me to try and play it off but adding content there, but I don't want a huge page of content. Any suggestions on how I can fix this and not have this huge vertical div? the URL is thanks!

  • Mrbrown

    Hi Leigeber,

    Thanks for the script. It´s really great. Just a question. I would like each image to load a textfield as well, in a different DIV. Can this easily be added to the original script? I have no idea how to do this. Thanks!

  • Anonymous

    The unordered list can take any HTML as-is.

  • Anonymous

    var slideshow=new TINY.slider.slide('slideshow',{params});
    var slideshow2=new TINY.slider.slide('slideshow2',{params});

  • Charles

    Great script! Is it possible to add hiperlinks to each image of the slideshow? and to change the duration of the transition? Thanks

  • Noahgelman

    I like that you can put content instead of just images inside, however, it seems that putting an unordered list in one of the slides breaks it. Just keep clicking next one and it breaks

  • Noahgelman

    I should also state that this is with rewind and auto set to false

  • Noahgelman

    Another Bug I discovered while experimenting is that when you have multiple sliders on a page, if any slider has more images than the first one, it'll break. The script takes the count of the pagination from the first #pagination div on the page. making all the others irrelevant.

    So if Slider1 has 4 images, and Slider2 has 8– Slider2 will break.

  • Very nice work…

  • web design miami

    Great script!
    I found a little bug when I need to use list (<ul>) in the content.

  • Abc

    Hello everyone! Today I just found this free host with:- 1500 MB of Disk Space- 100 GB Bandwidth- Your own domain hosting- cPanel Control panel- Website Builder- Over 500 website templates ready for download- Free POP3 Email Box and Webmail access- FTP and Web based File Manager – PHP, MySQL, Perl, CGI, Ruby. – No Ads at all !Check it out Here:

  • Nice tutorials..thanks

  • Sayeed_cse_hstu

    Heaven Soft

    HeavenSoft Web Solution is a professional website design outsourcing
    company based in Bogra , Bangladesh. For outsourcing best website
    design and development, HeavenSoft Web Solution is the name of trust.
    HeavenSoft Web Solution take pride in delivering outsource website
    design solutions, flash and animation, Search Engine Optimization (SEO) and offshore outsourcing

    We specialize in
    Custom Web Design
    eCommerce Web Development
    Flash web application development, Flash Custom Products Designer
    Studio Development, Flash T-Shirt Designer Studio, Flash Dynamic Photo
    Web Site Maintenance
    XHTML Conversion
    Web Template Customization
    Search Engine Optimization .

  • Cartero

    Man, I know a little bit of Javascript and HTML, but the explanation was made for almost experts. It looks like that not sharing the whole information would continue to making you pro. I really appreciate the script but it would be easier if all the knowledge is shared for install settings.


  • nice…..! 

  • Chenene

    Any ideas on why the script would break only in IE 8 & 9?

  • Guest

    Thank u very much…

  • Alex

    Great script, thanks a lot.

    I'm using this as a generic page-slider script, and it works great. My only issue is when I have li elements of varying size (width or height depending on the direction of the slide). I understand this was made for sliding fixed-size stuff, but it would be great if the script could intelligently move as much as the next li required. It would make it an even greater general-purpose sliding script.

    Thanks again for your great work.

  • Anonymous

    Is there anyway to randomize which photo shows up first within the "position" value

  • Anonymous

    Forget it, I found out how… I just put position: Math.floor(Math.random()*4), <-4 being whatever number u need it to be
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco}
    span.s1 {color: #6f6f6f}
    span.s2 {color: #00558e}

  • Ktully1

    Has anyone found a work around for varying width li's

  • websitedesigningsingapore

    Thanks! I have been working on a fully updated script with lots of added features and functionalities, including of course the mobile touch support.With your suggestions

  • Alex

    This is how the script works. You will need to have all your "li"s the same size.

    I added a "hide" option which hides the slide buttons when the slideshow has reached either edge (or does not display them at all if there is only one slide). Here it is on pastebin:

    A bit crappy, I know. Simply add "hide: true" to the initializer script.

    Again, thanks for the great work.

  • Alex

    There's a bug where the slider goes nuts if you double click on a pagination button before the current position. This happens on the demo page too.

    It doesn't seem to happen when the slider is moving forwards, though. Only while it's moving backwards.

  • Sagar

    it was nice reading your blog, we really appreciate your effort for sharing such valuable

  • Jonesy

    I'm getting an issue with the Tinyslider2 and Tinydropdown2 not working together on the same page – depending on the order of the links to the scripts it knocks one of the other out?  any ideas?

  • Radhityaradu

    how to give text in tinyslider2??
    please help me master??

  • Jaap76

    What codes do I have to remove to get rid of the 2 arrows on the left and right side of the photos? The tiny square boxes inside the photo are enough for me.


  • Jaap76

    Ok, I removed line 6 to 10 in the style.css file, and it works.

  • Is it possible to add hyperlinks to each image of the slideshow?

  • Jaap76

    Edit the index.html file.


    <div id="slider">
        <li><a href="http://www.your_link.html"><img src="photos/banner_store.jpg" width="280" height="115" alt="Image One" /></li>
        <li><a href="http://www.your_link_in_a_new_window.html&quot; target="_blank"><img src="photos/banner_store_mp3.jpg" width="280" height="115" alt="Image Two" /></li>

  • Jaap76

    The code above doesn't show as I written 🙁

    <div id="slider"><ul><li><a href="your_link"><img src="photos/banner_store.jpg" width="280" height="115" alt="Image One" /></li><li><a href="your_link_new_window" target="_blank"><img src="photos/banner_store_mp3.jpg" width="280" height="115" alt="Image Two" /></li></ul></div>

  • Smart Team

    It is possible in Dolphin Slideshow,you can add hyperlinks to each image of the slideshow.

    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.
    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 :
    PRO LICENSE version :
    Video Tutorials :

    Live Preview Demo Login:
    Username: admin
    Password: admin

  • Sagar

    Nice Blog. I was looking for the same topic over the
    internet and found your Blog. Good work done.

  • James

    Fantasic works like a treat!


  • Alexandermaks

    Please tell me how to setup pause on the mouseover and automatic extension after removal of the mouse


    I have exactly same problem.i love to see a workaround , a fix , or an update of those script , since they are very good


    after some futher search i found this :

    Just delete the line var TINY={}; out of the second included file – this essentially clears out the TINY variable which was setup in the first. You can also get rid of the T$ functions, but this is not essential

    works perfect 

  • Piltdownman

    Hi –

    I'm having a devil of a time getting this to work — and I'm scratching my head because it appears to be so simple.  I keep getting a server misconfig error from my host.  Any simple thing to look for?

    Thanks to any and all…

  • Molotov22

    How can I reload the slideshow after I dynamically change/add pictures in <li></li>

  • Awesome script! As someone else asked earlier, I'm also wondering – is there some way to make the slider pause on mouseover?

    Would really appreciate any help… And thanks for a great script!

  • I have seen many images sliders, but this is one of the best so far.

  • Nope
  • SEO Team Lnsel

     Hi! this is really good image and awesome script to understand, it will really help everybody, an web development company from Australia known as salesneer will be benefited with this script. To know more about salesneer please visit:

  • Tharindu Ijts

    Thanx Dera!!!!!!

  • Good slider I try using it but shows a scroll bar on load which look a bit problem.

  • Betomedina

    Hi, very nice slide.
    How can I have more them one slide in the same page to work??
    Thanks in advance!

  • Betomedina

    Hi, very nice slide.How can I have more them one slide in the same page to work??Thanks in advance!

  • Website Designing jodhpur

    Nice script. Thanks for sharing..
    a href="">Website Designing jodhpur</a>

  • Avinash Kabra

    Hi-TechWebMaster is a website designing company offering web services like web designing, web development, web hosting, SEO, domain booking, etc
    For Details log on:

  • Steve

    Great script, but is there anyway to incorporate easing into the script?

  • how do i pause it or play it? i tried changing values of on button click. it pauses after one slide but never starts again. help plz

  • chetaru


    Thanks for sharing this information and resources its really
    help full for me with the  help of this
    we can improve our designs and development I really inspire with this
    information thanks

  • maik

    For some reason, when using internet explorer and firefox, the slides move VERY choppily/lags. It runs great in Chrome and i'm not sure how to fix this.

  • Anonymous

    like live show photos. I am using it on

  • affiliate network

    really nice tutorial

  • Dee

    Hi there,

    Nice slider!

    what happens if we only want to use 2 photos?
    I take it these li's and it stops working rotating:

    <li onclick="slideshow.pos(2)"></li>
                <li onclick="slideshow.pos(3)"></li>

    What else do we need to change to get it to work with 2?

  • Hey its really nice and very useful tutorial for slider. thank you.  

  • How do you add more images than just the standard 3 or 4? I tried adding more li's on the index.html but when testing it comes up with the text but when you click any of the numbers or arrows nothing happens?

  • JT

    I'm trying to put DIV with text inside each LI. But it seems not work and all overlaps on 1st slide. Any fix about it?

  • JT

    OK, I was using absolute DIV position and needed to add aditional widths of the slider to the x-positions of DIVs.

  • Deb

    Very nice and informative article with demo, really appreciated

  • I like it. thanks

  • Rhett Daniel

    Nice site, Michael! 

  • Gpialla

    Hi. Good slider, but I have IE6 where is not shown the line of small boxes in top-right side.Also hovering the left or the right arrows, color does not change. Everything OK in FF.

  • Xebedy

    Very nice and useful thank you…

  • Asitava

    Hi Michel.I read your blog very carefully. It is really a nice blog and the information with in it about the java script slider is very useful.My name is infosolz and I am working in a web development organization called Infosolz.URL of my organization is
    I will definitely use this tools.Thanks. 

  • Web design London

    Thanks for sharing this information and resources its really
    help full for me..

  • Thanks for the nice tinyFader slide show

  • Just changed it to adrotator – change the code between <ul .. and </ul>

    <ul id="slides">
                    <li id="content">
                        <h1>TinyFader – Simple JavaScript Slideshow</h1>
                        <p>This super lightweight (1.3 KB) fading 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 and an active class on a navigation list if applicable.</p>
                        <p><em>For complete details visit <a href=""></a&gt;.</em></p>
                    <li><a href="; ><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /> </a></li>
                    <li><a href="; >
                    <img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></a></li>
                    <li><a href="; >
                    <img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></a></li>

  • Rajesh Vaishnav

    when i am two tiny slider in one page its conflicts.any solution ?

  • You have provided information on java script slider  is understandable or executable thanks dear.

  • steero nation
  • Hi,
    Awesome, its work perfectly.
    Thanks for sharing.

  • Zummer

    um. is it jus me or what is the point of making half minified code without comments when It's so easy to do just that and minify fully when needed.

  • Kevin G

    Fantastic script, I used it on my website <a
    href=""&gt; Glasgow Plumbers
    </a> for the header. The only problem I had was the images overlapping
    when it scrolled along but lucky I managed to fix it. Thank you for this great
    script, not only was it easy to integrate but it looks great too!

  • Mxi

    <a href="">PHP Development Company</a> Mxicoders is a leading PHP Development Company, website development company in India. We offers web development services using technologies like PHP, ASP.NET,web designing and SEO services at affordable rates.

  • Programming Tutorials

    nice and simple for more
    How to Make a Simple Image Slide Show in JavaScript visit


  • adumpaul

     Nice article.Code is really useful.Thank you for sharing.

  • Web design London

    Thanks for sharing this information and resources its really
    help full for me with the  help of this

  • Tejacharu

    Nice Java Script


  • Thanks for sharing the java script. It really helpful for web development purpose. I am also a web developer I will obviously try this. Thanks
    Asitava Bose
    Web developer in Infosolz

  • We can improve our designs and development I really inspire with this
    information thanks.. .



  • Joseph Love

    I'm having the same problem with it not downloading any suggestions?

  • lil_Blind Lov3_lil
  • adumpaul

    Nice article.Really useful.

  • Great! This version seems to be compatible with the html5 Doc. Type!
    I took the example and swapped the doctype and html tags…and it still worked in IE9!

  • Awesome script! As someone else asked earlier, I'm also wondering – is there some way to make the slider paus.

  • ZDXGSHZNSZYK I like it very much!

  • TS

    Works great but arrows does not show for the slider

  • RK

    How do I move the slideshow into an AP Div?

  • Ajusagmar

    auto replay ?

  • UptownGirl27

    Can this take video as well? Thanks!

  • Fmassaki

    Is there a way to set a link to each image?

  • GRX3

    Using this in a lightbox css effect and an iframe.  In IE 8 it just wiggles and seems to fail to switch images.  Works perfect in FF and Chrome. (buggy in IE)

  • Love how cut out the words!!!! Fantastic idea!

  • Jeremy Libertor

    I love it, but everyone who uses it wants a pause feature. Ideally it would pause on mouse hover.

  • Shiva

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

  • Rajesh Vaishnav

    can i pause this slider on mouse over please help

  • Great Carvers

    You want to buy wood ducks? Then order us for <a href="">Ducks Unlimited</a>, Bird Carving, decoy carving, canvasback decoy, canvasback drake, carved duck decoy, wood duck decoys many more ducks.

  • nice

  • Kocsismn

     I have a same problem as Fmassaki but when I want open this web page: I got 404 error. Can u help me, How I solved my problem, that I also want set a link to each image

  • Maikeruqt

     same with an older tinyslider version this is also a great script! but im trying  to put an image or a logo  just like sitting on top of this slideshow pls help.

  • Ipod Paolocar

    little question: How to put two of this slider in one page?

  • Xxyy1988

    i have the same problem. hope somebody can figure it out

  • xsd

    i'm noob ini javascript and html, can you help me how to change the size of the slider?

  • Angel

    How to use this script (especially move) for page scrolling by anchors or links?

  • angel

    Does anyone successful combine tinyslider2 with tinybox2 ?

  • Tchurch

    Works great, have fun…this beats many of the 'spensive tools and is easy to configure.

  • shirley

    I tried this and it did not work…It gives me scrolls on side and below…any suggestion?

  • sam

    This script is simply amazing. Very easy to use and it runs really smoothly.
    It is light, compact and very simple to use. The slider really adds a lot of content or images in a tiny space


    This script is simply amazing. Very easy to use and it runs really smoothly.
    It is light, compact and very simple to use. The slider really adds a lot of content or images in a tiny spaceSAID BY :

  • apollo

    script is simply amazing. Very easy to use and it runs really smoothly./It is
    light, compact and very simple to use. The slider really adds a lot of
    content or images in a tiny space
    SAID BY :

  • edward johnson

    Thank You

    The given information is very effective
    i will keep updated with the same

    web services

  • amit

    nice java script ………………

  • Naresh Kumar

    Thanks for this simple and light weight slider.

  • Ramesh

    Thankyou sir

  • Nick

    This is a great slider. Thank you.

  • Is there an unminified version of this? The download link is broken, so I grabbed the source from the demo.

  • Marw

    Any solutions even if nested in td and in div on ie7?

  • Thierry M

    really cool stuff !!! and reactive support Thanks

  • wholt

    where is the tutorial?

  • Thanks for sharing! i've been looking for a slide similar to this, helpful demo.

  • Trust

    i want to edit the height and weight

  • Steve P

    This isn't actually a bug at all. You can only have one element in the HTML with an ID of "pagination", as each element needs to be unique to pass any sort of W3C validation (and JavaScript calls like "getElementById" won't work properly) .
    The fix here is to change the second "pagination" name and adjust the name used in the JavaScript for the slideshow.

  • Deepika

    Hey Even I want to use 2 sliders, N i did
    var slideshow=new TINY.slider.slide('slideshow',{params});var slideshow2=new TINY.slider.slide('slideshow2',{params});
    and also saved 2 nd style sheet and renamed all fields for 2nd slider still no use…Can u plz enlighten me on this ! Thanks

  • Deepika

    I got a solution! I just changed the var names. And it works! thanks for the post 🙂

  • arturo barrios

    este script esta muy sencillo y simplemente fantastico…

  • Wayferer

    Thank you!