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',{
id:'slider',
auto:4, // false for no automation else the number of seconds between slides
resume:false, // continue auto sliding after interruption
vertical:false,
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.
February 24, 2013
February 3, 2013
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
Very good
*-*
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
I am not seeing that in my testing. Can you give me the details like browser/os etc? Thanks.
same here.
Firefox 4 beta 9 /windows 7 64bit
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.
bookmarked also. Thnx
still simple and look full stylish…awesome
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.
can I make it fade not slide?
thank you very much for a cool JS effect, can you submit it on my JS library?
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.
Hi,
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.
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.
Actually nevermind…I'm an idiot. I was using CSS edit and the live update feature wasn't working properly.
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.
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!
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
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 (!)
This script is simply amazing.
<script>alert('xss')</script>
Your program is excellent! +++
now…!
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.
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! + + +
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)
http://www.queness.com/resources/html/modal/jquery-modal-window.html
Very nice! I've been looking for a very small footprint slide jquery plugin for my portfolio site. Thanks for making this!
I really need to get multiple instances of this slider on a single page too.
Did you ever find a solution?
Thanks.
My images are all shifted about 40 px to the right. Can anyone help me correct this?
http://www.leeannobringer.com/JVGC/test-homepage.html
thanks!
Add "padding:0px" to #slider ul
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 !
WOW!!
Very nice post..Short, compact yet helpful!
I was looking for a pluggin for my site.
Thank you!
http://www.ecommerce4biz.com/
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 http://www.w00b.com thanks!
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!
The unordered list can take any HTML as-is.
var slideshow=new TINY.slider.slide('slideshow',{params});
var slideshow2=new TINY.slider.slide('slideshow2',{params});
Great script! Is it possible to add hiperlinks to each image of the slideshow? and to change the duration of the transition? Thanks
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
I should also state that this is with rewind and auto set to false
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…
Great script!
I found a little bug when I need to use list (<ul>) in the content.
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: http://www.000webhost.com/446974.html
Nice tutorials..thanks
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
Gallery,
Web Site Maintenance
,
XHTML Conversion
,
Web Template Customization
and
Search Engine Optimization .http://heavensoft.info
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.
Thanks
nice…..!
Any ideas on why the script would break only in IE 8 & 9?
Thank u very much…
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.
Is there anyway to randomize which photo shows up first within the "position" value
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}
Has anyone found a work around for varying width li's
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
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:
http://pastebin.com/ra5gitCi
A bit crappy, I know. Simply add "hide: true" to the initializer script.
Again, thanks for the great work.
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.
it was nice reading your blog, we really appreciate your effort for sharing such valuable information.www.ioctopas.com
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?
how to give text in tinyslider2??
please help me master??
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.
Thanks!
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?
Edit the index.html file.
Try:
<div id="slider">
<ul>
<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" target="_blank"><img src="photos/banner_store_mp3.jpg" width="280" height="115" alt="Image Two" /></li>
</ul>
</div>
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>
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.
———————————————-
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 : http://www.DolphinSlideshow.com,
FREE LICENSE version : http://www.DolphinSlideshow.com/downloads/DolphinSlideshowMaker.zip
PRO LICENSE version : http://codecanyon.net/item/dolphin-slideshow-maker/309834
Video Tutorials : http://www.DolphinSlideshow.com/Tutorial
Live Preview Demo Login: http://www.DolphinSlideshow.com/Demo
Username: admin
Password: admin
Nice Blog. I was looking for the same topic over the
internet and found your Blog. Good work done. http://www.ioctopas.com
Fantasic works like a treat!
James
http://www.theweblord.com
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 :
http://www.scriptiny.com/qa/2263/how-combine-javascripts-namely-tiny-dropdown2-and-tinybox2
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
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…
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.
That's a different one:
http://www.scriptiny.com/2010/09/fading-slideshow-script/
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: http://salesneer.com.au/
Thanx Dera!!!!!!
Good slider I try using it but shows a scroll bar on load which look a bit problem.
Hi, very nice slide.
How can I have more them one slide in the same page to work??
Thanks in advance!
Hi, very nice slide.How can I have more them one slide in the same page to work??Thanks in advance!
Nice script. Thanks for sharing..
a href="http://www.hi-techwebmaster.com">Website Designing jodhpur</a>
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: http://www.hi-techwebmaster.com
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 slider.auto on button click. it pauses after one slide but never starts again. help plz
Hi….
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
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.
thelolafoundation.org
support@thelolafoundation.org
like live show photos. I am using it on http://www.asianventure.com/vietnam.html
really nice tutorial
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?
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?
OK, I was using absolute DIV position and needed to add aditional widths of the slider to the x-positions of DIVs.
Very nice and informative article with demo, really appreciated
I like it. thanks
Nice site, Michael!
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.
Very nice and useful thank you…
http://www.cardiff-website-design.com
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 http://www.infosolz.com.
I will definitely use this tools.Thanks.
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="http://www.leigeber.com/">leigeber.com</a>.</em></p>
</li>
<li><a href="http://www.abcd.com.au" ><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /> </a></li>
<li><a href="http://www.abcd.com.au" >
<img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></a></li>
<li><a href="http://www.abcd.com.au" >
<img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></a></li>
</ul>
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.
nice
<a href="http://http://blogkindle.com/2010/11/kindle-black-friday-deal-now-live-on-amazon/">kindle black friday</a>
Hi,
Awesome, its work perfectly.
Thanks for sharing.
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.
Fantastic script, I used it on my website <a
href="http://plumbersglasgow247.co.uk"> 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!
nice
<a href="http://www.mxicoders.com/">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.
nice and simple for more
How to Make a Simple Image Slide Show in JavaScript visit
http://anurag-tutorial.blogspot.com/2011/06/make-simple-image-slide-show-in.html
thanks..
http://anurag-tutorial.blogspot.com
Nice article.Code is really useful.Thank you for sharing.
Thanks for sharing this information and resources its really
help full for me with the help of this
Nice Java Script
thankyou
tejacharu
http://www.peppersquare.com/
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
http://www.infosolz.com
We can improve our designs and development I really inspire with this
information thanks.. .
IT ISNT DOWNLOADING, AFTER CLINKING DOWNLOAD HERE OPTION???
I'm having the same problem with it not downloading any suggestions?
nice
<a href="http://http://freeannualcreditscore-government.com/">annual credit score</a>
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!
Works great but arrows does not show for the slider
How do I move the slideshow into an AP Div?
auto replay ?
Can this take video as well? Thanks!
Is there a way to set a link to each image?
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.
http://grx3.com/portfolio.html (buggy in IE)
Love how cut out the words!!!! Fantastic idea!
I love it, but everyone who uses it wants a pause feature. Ideally it would pause on mouse hover.
It is informative and useful for me…..
Thank you…
can i pause this slider on mouse over please help
You want to buy wood ducks? Then order us for <a href="http://www.greatcarvers.com/ducks-unlimited.html">Ducks Unlimited</a>, Bird Carving, decoy carving, canvasback decoy, canvasback drake, carved duck decoy, wood duck decoys many more ducks.
nice
I have a same problem as Fmassaki but when I want open this web page: http://grx3.com/portfolio.html I got 404 error. Can u help me, How I solved my problem, that I also want set a link to each image
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.
little question: How to put two of this slider in one page?
i have the same problem. hope somebody can figure it out
i'm noob ini javascript and html, can you help me how to change the size of the slider?
How to use this script (especially move) for page scrolling by anchors or links?
Does anyone successful combine tinyslider2 with tinybox2 ?
Works great, have fun…this beats many of the 'spensive tools and is easy to configure.
I tried this and it did not work…It gives me scrolls on side and below…any suggestion?
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 : http://www.apollo-computers.com
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
SAID BY : http://www.apollo-computers.com
Thank You
The given information is very effective
i will keep updated with the same
web services
nice java script ………………
Thanks for this simple and light weight slider.
Thankyou sir
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.
Any solutions even if nested in td and in div on ie7?
really cool stuff !!! and reactive support Thanks
where is the tutorial?
Thanks for sharing! i've been looking for a slide similar to this, helpful demo.
i want to edit the height and weight