The top 5 best jquery slider plugins for your website

July 30, 2011

top-5-best-jquery-slider-plugin

While doing websites, 8 times out of 10 comes the question of creating an image slider. During those past years jquery made our choice broader, and here is a selection of the top 5 jquery slider, that i personally use in my projects and find the best of the crowd.

1. Nivo Slider

nivo-slider

Nivo slider is the most famous slider that introduced the new transition effects that came around 2 years ago. It features 16 pretty nice transition effects but keep the file size still light at 15kb. You can add HTML captions but it doesn't slide HTML content per sea, only images.
It includes three styled themed that are pretty nice if you don't want to go with some custom design. One great forks on github is the one from Brico, that adds custom effect on previous, next and control.
It works in modern browser such as: Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+.
It doesn't support Internet Explorer 6, but some effects do work. If you want something similar with ie6 support you can also check coin slider.
TIP> lower number of slices, boxCols and boxRows to get a fluider animation on some browser (especially ie).

2. Anything Slider

anything-slider

That was and still is most of the time my all around slider, you can throw any content at it, HTML, Video, Flash and it will work like a charm.
Over the years a lot of options made it even more flexible. It now comes with styled theme, but i will strongly suggest to go with your own.
It has a few officially approved forks on github, the best being the one from Proloser.
One nice feature is the fact that it pauses your youtube video when sliding to another slide, pretty neat. It also support hashtags to link your page to one specific slide. New animations were added that animates not only the image when sliding but the text too.
It works on all browser but as usual check your ie6, depending on the slide content the animation can be a bit jaggy.

3. Jquery cycle plugin

cycle-plugin

One of the oldest, this plugin is not a full blown slider by itself but a plugin to animate image transition (which is what a slider is basically). You have to add next, previous links, navigation and style your slider to get on par with the other ones on the list. It is however a breeze to set up, and is a slider that i use all the time when i need a simple slider with fade effect (there is a Cycle Lite Plugin with only that effect at less than 8kb). Moreover it is easy to set before/after callbacks and triggers to do some advanced customization (i had this slider set up to go through 1.000 of images dynamically from a database in less than 10 minutes).
There is a lot of demos and user-uploaded scenario on the website, that will help get your project going.
Of note only images can be animated.

4. Roundabout

roundabout

This is a great plugin to bring some depth to your slider. I found this one when i was struggling to make one just like it, perfect timing.
You can do a lot more than just a slider with this one, but that still is its main use.
The effect is of a 3D turntable-like slider. It animates images from a perspective from back to front like those flash slider and 3D carrousel.
With the Roundabout Shapes plugin you can add some other transition effect to spice up your project.
Markup and css is pretty simple, you can also easily add next and previous buttons to it and lot of options (such as hooking events) are available to make it even more special.
Of note it works both with images and HTML content.

5. Slides

slides

A no fuss, easy to use all around slider. This one is pretty new on the block, doesn't reinvent the wheel but makes a good job. What i like best about it is that when going back to previous slides it doesn't scroll all the images until it gets to the one you selected, but directly slide your image in (with the slide effects).
It supports HTML captions for images and includes navigation. You can link to a slide inside of a slide, use thumbnails for navigation, callbacks, autoheight, pagination… Two effects are available slide and fade.
Of note it works both with images and HTML content.

Alternatives:

I also like to take a look from time to time to the tutorials of codrops, they have some great ideas of original sliders. They are not full blown plugin with options and support (just tutorials) but might come useful on one of your project.

About Us

We create free and premium graphic, design and web resources. We thrive on bringing you the best of the best in each of our beautifully crafted resources. Share the love around, enjoy it at will, and be sure to give us your feedback to make pixeden your favorite place to hang out. Join now and follow us to receive exclusive freebies and get to know our premium plans and services from $6 a month.

72,422,989 Downloads