I was recently asked by a client to create a bespoke jQuery plugin slider. Fortunately for me the guys over at CSS tricks had already created a very good platform on which to start. The anything slider is a powerful jQuery slider which enables users to create slides from just about anything you can imagine. Images, text and lists are all facilitated. My modifications are freely available to download and try out in the demo.
Usage
For the complete guide to using the anything slider I would recommend checking out the CSS Tricks article as all the core functionality has remained the same.
Advanced Features
The anything slider is now capable of auto generating thumbnails based on the image passed into the <li> slide. as long as a class of “photo” is applied to the image. In the event that you do not have an image in the slide, you can now pass in a default parameter for a thumbnail that you would like to display like so:
defaultThumb: 'images/kitchens/9.jpg'
The slider controls have also been modified so that the arrows will browse through all the available slides, only 5 slides will appear on screen at a time meaning that you can have unlimited slides without having any display issues.
Demo
You can check out the modified slider demo in action. I have tested this plugin on FF, Safari and IE browsers and had no issues. One of the really great aspects about this plugin is the fallback mode when you disable javascript, it has been really well thought out by Chris Coyier so you wont fall victim to inaccessible content. Please feel free to download my modified version and try it out for yourself!
January 17th, 2010
Do you have an idea how to simply append a small text without the index number?
« Reply
February 1st, 2010
Is there a way to have more than only 5 items in the navigation menu?
« Reply
Chris Reply:
February 23rd, 2011 at 10:07 pm
@Tim, I asked myself the same question and found a solution.
you can start by playing with the “width” of “#thumbNav” from slider.css.
For instance, try “550px”. Add 1more slide to the index page with an image and you will see 1 more item.
From there, it is just a matter for you to reorganize the style for your needs.
Enjoy!
« Reply
July 20th, 2010
I’m trying to customize this slider, however, I can not get my navigation buttons to appear correctly in Firefox. Could you give me some advice? Also for some reason I have “><" appearing before my slide images. I can not find anywhere in the code where this is. Any help would be very appreciated! Thank you. By the way great slider.
« Reply
philipbeel Reply:
July 20th, 2010 at 8:42 am
@Jason, You can adjust the styling in the [#thumbNav a] of slider.css In the example this just holds an image, so the padding etc will need to be modified to suit your purposes. Good luck.
« Reply
September 9th, 2010
Brilliant! Thanks for this fantastic slider!
« Reply
December 3rd, 2010
Thanks for such a great work around! Its have brightened my work….
« Reply
April 15th, 2011
the slider works great, thanks good work. One thing I can’t get my head around is how the tumbnails work. I sat an asp repeater with to get pictures out from my database, but the tumbnails don’t work with that. my img class has the name “photo” so, why doesn’t it work? help please?
Hanne
« Reply
January 17th, 2012
thanks for sharing this jquery, great.
« Reply
February 18th, 2013
Hi Philip,
amazing work thank you. I´ve tried implementing your solution at http://alturl.com/jtyyx to get some thumbnails auto-generated. I´ve managed to pull the images in from a database too and the slider works as such, but the arrows just WILL NOT WORK. I´ve spent numerous hours trying to get it fixed, and my Firefox Error Console doesn´t kick back any Javascript errors either. On your DEMO, they work fine on all the browsers that I´ve tested. As I´ve taken your code over 1 to 1, apart from a few CSS tweaks, I really don´t know what is causing this. Any help would be much appreciated thank you.
All the best
Paul
« Reply
April 25th, 2013
hi, i am trying to used anything slider from a php page, the jpg or photo are display without problem but the video give the error no video with supported format an MINE found , but if rename the page using .html instance .php work fine , so my question is Anything slider only display video if the page have .html as extension name on the page, else tell how to display video using .php extension
« Reply