Advertise here with BSA
Common JavaScript techniques include Ajax content, dynamic forms, and modal windows. The content slider/slideshow interface has always been around but has gained a tremendous audience over the past few years. And with the continuing growth of jQuery it is safe to assume that more developers will be creating projects with an open source license.
In this collection I want to present 30 of the most interesting jQuery slider plugins. Each one should work properly with the most current version of jQuery and they also provide their own documentation. It is a great way to introduce yourself into the system and start building websites with some more dynamic effects.
iView
Commonly the jQuery iView plugin helps to put together iframe content within a slider. This standard interface allows developers to create animated captions so the entire slideshow interface behaves dynamically. And you can embed lots of other content aside from iframes, like YouTube videos or background images. You can see these features in this live demo.
Adaptor
Adaptor is another plugin created as a jQuery content slider. This user interface is much sleeker than other common plugins, yet I have noticed the file sizes are a bit larger as well. It comes with a number of default animations which are much more powerful than CSS3 alternatives. You can download the source off Github or check out a live demo from the plugin homepage.
Galleria
The Galleria plugin is definitely one of the best image slideshow galleries. It comes with a very easy-to-use interface that anyone should understand. It is also completely free to download and comes with its very own documentation page. This may take a bit of time getting adjusted to all of the settings. But Galleria will captivate your visitors because it is easy to use and so simple to understand.
Slider.js
I have personally used Slider.js in a couple situations and never had a problem with it. This plugin is very basic when first added into a webpage. You should attempt to update a few sections in the CSS where you may control the colors and UI elements. Currently the plugin has been undergoing upgrades for v2 which should be released sometime during 2013.
SlidesJS
SlidesJS is a completely different project in comparison to Slider.js. This also runs on jQuery but SlidesJS is much more refined to be placed within responsive layouts. You can fill up images which take over the entire width of the screen and it will look great. Check out the files in SlidesJS Github repo to learn more.
Evo Slider
Breaking away from the image sliding content we have Evo Slider. This is built for housing HTML content, which may be images, but it could be anything you like. Every one of the slides will fold into each other like a horizontal accordion. Check out the list of examples to see how this could be implemented into your projects.
bxSlider
bxSlider has gotten a lot of solid publicity in recent months. It just happens to be one of the simplest, cleanest, and easiest plugins to use on any website. Features include a responsive layout and the ability to touch/swipe on a mobile device. There is an older deprecated version floating around the web but you can find the most up-to-date released in this Github repo.
Unslider
Unslider behaves more as a fullscreen interface block than a typical image slideshow. jQuery is used as the backend plus you have the option of customizing many parameters like the animation speed or delay between slides. It even supports keyboard navigation for moving next/previous without a mouse! It is a newer project but definitely worth the leap. Check out the plugin homepage to learn more.
Tiny Carousel
Tiny Carousel is a more lightweight alternative for typical HTML sliding content. The carousel means once you reach the end of the content list, it will automatically restart from the beginning and slide through again. You can even set the orientation to slide horizontal or vertical on the page. This is a plugin worth looking into if you need the carousel-type functionality.
Basic Slider
With a name like Basic Slider you can probably formulate an opinion of this plugin. This has been created with a mindset of being simple and lightweight. You will find all the essential functionality and nothing more – this leaves room for customization of the skin design via CSS styles. There are more details on the plugin repo or you can see alternative code examples on the plugin homepage.
Skitter Slider
Using this plugin you will find some really big oversized UI elements! Skitter is a jQuery slideshow plugin with content sliding for image galleries. It also has captions which display through animation after switching between slides. I really like the interface, but designers may find the controls are somewhat clunky.
Liquid Slider
Looking at the homepage for Liquid Slider you can tell it was developed with some grace by Kevin Batdorf. This plugin is meant to be very simple and responsive when needed. It will use CSS3 transitions when possible but also falls back onto jQuery for older browsers. Even the plugin documentation is fantastic and certainly worth a quick peek.
ResponsiveSlides.js
ResponsiveSlides.js is another plugin doing exactly what you might expect! You can build a responsive slideshow panel switching between photos and other content. It is really easy to install and you have the option of turning off all standard user interface controls. This means users will have to sit and watch the slideshow rather than jumping ahead. But from customizing options you can include controls and image captions, as in this demo on the main website.
SlideDeck
SlideDeck is one of my personal favorites as it is a very professional jQuery plugin for developers. There have been a few iterations released leading up to the current version, which supports any type of media from images to videos and HTML content. Granted this one does cost some money but working on certain projects this may be worth the investment.
RSlider
RSlider is a beautiful fullscreen image slider using jQuery. I have not introduced any other fullscreen plugins and this is certainly one worth noting. It is totally free to download and may be used in any website project with fullscreen background images. The controls are also easy to customize, and you can read more on their official blog post.
Coin Slider
The Coin Slider plugin is really unique with its library of various jQuery animation effects. The transitions between each slide are seamless and beautiful. This is even supported in older browsers going back to Internet Explorer 6! A great choice for compatibility with any website.
PlusSlider
Looking at the PlusSlider it is definitely a more basic version of any image slideshow. You can quickly implement either images or HTML into the content and attach this to an unordered list on the page. The design almost reminds me of SlideShare with the similar navigation arrows and panel icons at the bottom.
AnythingSlider
Another fairly basic example is the AnythingSlider released by CSS Tricks. This content slider is managed as a very bare-bones starting kit to get something up and running on your website. The documentation on Github is easy to go through and provides an excellent starting point for new developers.
wmuSlider
For a darker and more unique interface please check out wmuSlider. It was created by Brice Lechatellier and you can see a live demo on his website. The arrow keys are translucent and only appear on the slideshow when hovering. Additionally the files themselves are very small but there are not so many alternative parameter methods for customization.
Choco Slider
One really good beginner’s plugin for content sliding is Choco Slider. This very tasty jQuery plugin is easy to customize and easy to install. But it also comes with very bare features in comparison to other choices. Developers who want to get their hands dirty may try this out as a simpler solution for a simpler website layout.
Superslides
Superslides is another beautiful fullscreen jQuery-based image slideshow plugin. You merely input the image files that you need and the design will fit them naturally into the full page background. Additionally there are navigation arrows and small circular icons for transitioning between slides. The source code is very easy to work with and you can find more examples in the Github repository.
jQuery Carousel
To jump back into carousels we have this jQuery Carousel plugin released by Thomas Jaggi. It is responsive and works to fit any type of content into the slides, plus the whole slideshow will restart from the beginning after hitting the last one. The interface itself is swipe-enabled which is good news for tablet & smartphone users.
touchSlider
Looking at the demos for TouchSlider it does use a very specific interface design. This may not fit well into all your sites and so it is notable that this plugin may not be for everyone. But it does include a nice core functionality and the design is always customizable. Check out the plugin Github repository to learn a bit more.
Responsive Carousel
Filament Group released a great plugin for responsive content carousels. This is free to download off Github and customize into your own projects. Currently it is still in development and the full documentation has not been completed either. But you may want to check out what has already been done and see if this plugin might fill a void in your project work.
rcarousel
Here we have yet another great carousel plugin named rcarousel. It is a continuous content slider built for housing much more than just images. You can add other types of HTML/CSS content into each slide and they will display properly. Also the animation effects are simple yet effective to achieve the typical carousel interface.
Flux Slider
I have known about Flux Slider for a while and only recently got the chance to use it. This is simply an amazing plugin which allows for a great number of custom jQuery transition effects. You may select between 3D or 2D animations, and these can be dispersed intermittently and used within various transitions on the page.
iOSSlider
iOS Slider is a really unique project built to work specifically on touch devices. The whole plugin can be implemented very quickly if you know how to setup the default parameters. It is also one of my favorites because you can manipulate both images and text within the sliding box. It works great on tablets and smartphones to fit nicely into a responsive layout.
Lean Slider
Taking a peek at Lean Slider this is still one of my favorite new releases. This is a typical content slider which can house images, HTML content, videos, and other forms of embedded media. It also behaves like a carousel where you can move forwards or backwards in any direction continuously. The plugin homepage offers a lot of documentation and you can learn more by scanning notes on the plugin Github repo.
Craftyslide
The Craftyslide plugin is a free open source project for tiny slideshows. The files are only 2KB and it has been created from the ground-up to remove all the excessive frills you can find in other plugins. This is meant as a starting template which looks good on its own, but may also be customized for nearly any website. Craftyslide may also be found on Github with related documentation and support questions.
Blueberry
Last on the list we have Blueberry which is actually one of the better fluid slider plugins. This will adapt to any layout size and the image captions are beautiful. It does require a bit of extra HTML markup added into the page. But if you don’t mind the effort Blueberry can deliver one amazing jQuery-based slideshow performance.
Final Thoughts
Although there are many other alternatives to choose from, jQuery is easily the best-supported open source JavaScript library. So many free plugins have already been released and developers are putting out new ideas every month. I hope this collection may offer ideas for webmasters who have been looking to implement a slider interface. Additionally if you know about other jQuery plugins which we missed please share with us in the post discussion area.
Advertise here with BSA