Nowadays mostly designers & developers use sliders or carousels in their blog or website and jquery make this very easy to be used. jQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers.
In web design a carousel is an element giving visitors easy access to several content items. It is typically a dynamic scrolling list of items in horizontal order. I have bookmarked some efficient sliders that can also be easily integrated into WordPress if you have the skills.
Today there are many excellent free jQuery Carousel plugins available and it makes it difficult to choose the best one. I am sure this post will be helpful to both moderate and advanced developers alike. Here is the list :-
Sliders:
1. Slidorion- New:A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.
Slidorion is FREE to use provided that you leave my credits intact, and is licensed under the Apache License 2.0
2. Grid Navigation Effects with jQuery:Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
3. Easy Paginate:This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It’s main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.
4. Elastic Image Slideshow with Thumbnail Preview :The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.To make this slideshow responsive, a mixture of JavaScript and CSS techniques is used.
5. Chop Slider 2:Chop Slider is the greatest and the mosteye-catchinganimated jQuery image slider”It is developed by the iDangero.us and it comes with the following features:
Chop Slider uses full power of CSS3 animation (2D and 3D transform transitions)
Has own CSS3 2D Transforms and 3D Transforms support detection and works a little bit different (but still awesome) in old (and Internet Explorer) browsers
Transitions Library is the additional script file that contains a lot, lot, lot of predefined transition effects:
122 2D Transitions – the most common case. These 105 effects will work in all major browsers, except IE. In IE they will look a little bit different but still awesome
60 3D Transitions – for the modern browsers. Currently work in: Chrome (Windows Vista+, Mac OSX), Safari (Windows XP+, Mac OSX, iOS)
5 “No CSS3” Transitions – for the browsers that do not support CSS3 Transforms like IE6-9 (not presented on this demo page)
5 “Mobile” Transitions – for the mobile browsers (not presented on this demo page)
6. Orbit: A Slick jQuery Image Slider Plugin:Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.
You’ll notice that the “id” of the parent div is “featured”, but it doesn’t have to be. When you call the Orbit plugin, you set your own selector and the magical “orbit” class gets applied. All we need to do now is activate the Orbit plugin.
7. Rotating Image Slider with jQuery:In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.Well use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.
8. Coin Slider:Coin Slider slices your images in squares. Basically its a latest (and improved) version of jqFancyTransitions but with new fancy transitions effects. Coin Slider have a lot of options for helping you set slider as you want.
9. JQ Fancy Transitions:I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decided to make my own slideshow gallery plugin for jQuery. Thats how born jqFancyTransitions was.
10. Nivo Slider:The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning. The Nivo Slider makes displaying your gallery of images a beautiful experience, by using amazing transition effects ranging from slicing and sliding to fading and folding. The Nivo Slider was designed to be as simple to setup and use as it could possibly be. With a small bit of HTML and Javascript, you can have the slider up and running in a matter of minutes. However this doesnt mean you cant tweak the slider to your hearts content using the plethora of settings and style it using CSS.
11. Agile Carousel:Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup. Now posted on Github for faster development.
12. Jshowoff: A jQuery Content Rotator:
JShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg.
- ) inside a specified wrapper element (eg.
- ) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.
13. Lemmon Slider: Carousel SupportingVariable Slides/Images Widths:
LEMMON SLIDER is a jQuery-based carousel that supports slided elements with variable widths. It’s lightweight and very simple to use.
Features
- Can slide any kind of content ULs, OLs, DIVs, etc.
- Supports variable elements widths
- Sliding by one element or by a page
- Supports looping
- Supports infinity NEW (since v0.2)
- Tested in Firefox, Chrome, Safari, Opera, IE6+
jQuery Carousel Plugins, Tutorials and Examples
1. JCarousel:
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
2. Cloud Carousel: A 3D Carousel in Javascript:
There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.
The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.
3. Bxslider:
Features:
Horizontal, vertical, and fade transitions
Display and move multiple slides at once (carousel)
Prev / next, pager, auto controls
Easing transitions
Random start
Ticker mode
Before, after, first, last, next, prev callback functions
Optional styling included
Tons of options
4. jQuery MS Carousel:
First of all, It has freedom to use. Use it on DIV, LI or any tag. You can use your own layout. Each carousel can have own look & feel and behavior. Put next/previous button wherever you want or don’t put anywhere its up to you. The most important part is; it returns a carousel object and do whatever you want. This is what I call freedom 🙂
5. Carousel WordPress Plugin:
This plugin was commissioned by a client. The code base for the carousel came from a Cnetwho generously provide an Open Source MIT license.
Instructions
1. Download plugin
2. Use WordPress Plugin installer, or:
3. Unzip to local directory
4. Upload to your plugins directory
5. On WordPress administrative panel, go to Carousel tool group and create a new carousel, and enter data as indicated.
6. In a post or page, insert the code [carousel name=’NAME’], with the name of your carousel inserted in place of NAME, or
7. if you prefer to insert inside a template you can call the carousel using the following php code:
<?php print do_shortcode("[carousel name='NAME'["); ?>
6. Floom:
If you are looking for a really new and unique way to create a nice slideshow for your website, then you should take a look at Floom. On the source site you will find two way to set Floom up: One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing a element collection, where the passed element has to be the actual image collection. Sounds interesting? It is! So have a look:
7. jQuery Carousel:
Options can be passed to the jquery.carousel method in the form of an associative array:
direction determines the direction of the carousel (horizontal by default)
1.loop, set to true, allows you to define a carousel that loops (false by default)
2.dispItems determines the number of items to display per step (default 1)
3.pagination, set to true, allows you to display a paginated carousel. (false by default)
4.paginationPosition (depends on pagination) determines the page position relative to the main slide container. (inside by default)
5.prevBtnInsert (depends on btnsPosition) determines how the prevBtn element is inserted into the DOM. (prependTo by default)
6.delayAutoSlide (depends on autoSlide) allows you to set a time delay between two co-existing carousels (0 default)
8. Roundabout For jQuery:
Roundabout is a jQuery plugin that easily converts unordered lists& other nested HTML structures into entertaining, interactive, turntable-like areas. Its ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with anextensive API that allows for some pretty amazing results.
Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.1). It works in all major modern browsers and even some of the older, not-so-modern ones.
9. Roundabout Shapes for jQuery:
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.
Like its Roundabout companion, Roundabout Shapes is released under the BSD license. If youre unsure of what that means exactly, the entire license can be found in the source code. Please, have a ball with it!
10. WOW Slider:
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It’s a very effective method to increase the web site usability and engage the user.
WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds,Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing. WordPress slider plugin and Joomla slider module are available also.
11. jCarousel Lite:
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
12. Carousel Slideshow:
Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion. Highlights of this script other than its stunning appearance are:
Slideshow can be set to either slide in from right to left, or the reverse.
Slideshow can be set to be 4-sided, 6, 8, or 12. A 4-sided slideshow for example means 2 images will be in view at all times (the other two behind the scene).
Each image can have an optional link associated with it.
Slideshow pauses on mouseover.
A DOM based script that works in modern DHTML browsers- IE5+, NS6+, Opera 7+.
13. Tiny Carousel:
Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
Features
Can slide vertical or horizontal
Supports navigation by button or paging
The point where the carousel starts can be set
Animation time can be set in milliseconds or to ‘instant’
Number of block to move at a time can be set
A interval can be set to slide automaticaly every given milliseconds
Easy customizable
Supports all current browsers (Firefox, Internet Explorer 6+, Safari, Opera, Chrome).
Dual licensed under the MIT or GPL Version 2 licenses.
Lightweight its only 100 lines of code. mimified the size is 2,29 kb
14. K3D Carousel:
It is a 3D carousel to rotate images. The currently available jQuery plugins for this purpose were either too large, too restricted (showing only 4 at a time is not good enough), or too old (not working in jQuery 1.4+).
15. iCarousel:
One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.
16. Making a Mosiac Slideshow with jQuery and CSS:
When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.
17. Carou Fredsel:
JQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. The carouFredSel-plugin was built using the jQuery-library. It is dual licensed under the MIT and GPL licenses.
18. jQuery Carousel Plugin:
We are aware there are ton’s of carousel’s already out there but many We’ve seen either require non-semantic mark-up, are unresponsive resulting in poor usability or have unnecessarily large file sizes, so hopefully We’ve managed to quash these concerns with this carousel.
19. Anything Slider:
Features:
Panels are HTML Content (can be anything).
Multiple AnythingSliders allowable per-page.
Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).
Optionally resize each panel (specified per panel in css).
Optional Next / Previous Panel Arrows.
Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
Link to specific slides or go forward or back one slide from static text links – go to Slide 4 (Quote #2) in second example.
Each panel has a hashtag (can link directly to specific panels).
Optional custom function for formatting navigation text.
Auto-playing slideshow (optional feature, can start playing or stopped)
Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
Pauses slideshow on hover (optional).
Optionally play the slideshow once through, stopping on the last page.
20. Slides:
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
If you find a bug please submit an Issue or email supportwith a brief description of the bug and a link to where it can be reviewed. Slides is provided with limited support. If you need support please visit the Slides User Group.
Slides is compatible with all modern web browsers and jQuery versions 1.4.4+.
21. JDigiClock Slider:
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.
jDigiClock has been tested and works on the following browsers:
Internet Explorer 7 (PC)
FireFox 3.5 (PC/Linux)
Google Chrome 3.0 (PC)
Safari 4.0 (PC)
22. Dual Slider:
It’s fairly simple to get this going, just copy and paste markup from this file if need be.
01.The easiest thing you can do is download the quick start pack and modify as you wish 🙂
02.If you don’t want to do that then you can take the elements individually and build them into an existing site. Start by getting all of the dependant files that are listed up top, including dualSlider.
03.You will also need some CSS to get this going, or it won’t work at all. To get started just copy it from jquery.dualSlider.0.3.css.
04.Now include all of these files in the of your html document .
05.Once this is all done you need to get the markup onto the page, you can view the source of this document to get an idea of how that works, it can either be static or come out of a database, but thats up to you. If it’s out of a database no worries, the paging is built dynamically by the plugin.
06.Initialise the plugin as per previously given, view source for an example.
07.and relax…
23. Liquid Carousel:
Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.
This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable. It will always display three images at the same time, with all the rest hidden behind the center image. I have detailed instructions for using the plug-in, as well as a list of all the options and some frequent questions. If you have any questions about the carousel, please post a comment below.
Features
Arrange div’s of content in a 3-D, rotating carousel.
Currently supports one flanking ‘feature’ on either side of center feature.
Show clickable indicators (blips) of what feature is currently at the center.
Display text overlay on bottom of feature (can be included anywhere on image using CSS, and below image using an option)
Speed, effects, locations, and more are all changeable.
See in action on Rowan University’s homepage.
Works in Chrome, FireFox, Safari, and IE6+.
Works with jQuery v1.3+.
Automatically preloads images before fireing up the carousel.
25. jQuery Waterwheel Carousel:
This jQuery plugin can display images with a cascading waterfall effect. It can be positioned either horizontally or vertically, and custom events can fired when an image rotates into the center or is clicked. The callback functions can be used to programatically trigger Lightbox-type effects, or load specific content into another region of the website. There are a lot of possibilities here.
Features/Notes
Horizonal or vertical orientation.
Numerous callback functions for when items move in and out of the center position.
Callback function for when an item has been clicked.
Little CSS required.
Supports images of the SAME dimension only.
Speed, animation type, and item positions and distances are all tweakable.
Change the number of “flanking” items, as well as their opacity (you can turn transparency off as well).
Circular effect achieved by cascading to opposite side when ‘edge’ hit.
Very customizable with many options.
Several example cases in the download index file.
Works in Chrome, FireFox, Safari, and IE7+. Limited support for IE6.
26. 3D Carousel:
Created a 3D Carousel from a list of images, with reflections and animated by mouse position.
In contrast to the other two-dimensional display modes, carrousel mode presents your pictures in a three-dimensional view taking advantage of the potential offered by Pictomio’s internal rendering engine.
27. jQuery Carousel:
Recently weve had the need of several jQuery widgets, because, no matter how many already exist in the wild, they never seem to have all the features we require. Reinventing the wheel? Well yes, but theres no harm if the current wheel doesnt fit the vehicle.
Further to that, building widgets with various JavaScript libraries is actually pretty good fun, and is definitely a good way of familiarising yourself with that particular library. Having recently moved from using YUI to the more widely used jQuery, these widgets have aided our education.
28. Barousel and Thslide:
Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.
Download
Source – 12Kb: jquery.barousel.js
Minified – 7Kb: jquery.barousel.min.js
Compatibility
jQuery 1.3.x +
Firefox 3+
Internet Explorer 6+
Chrome 1+
Safari 3+
29. Theatre Carousel:
During a decade in the CMS business I’ve learned that
no matter how good the tool is the fantasy of designers always exceeds it
They don’t want to have one gallery. They want to have many types of galleries. They don’t want to have vertical slideshow, they want to have also horizontal and fade in/out slideshows. And it makes sense.
We can be very conservative regarding content editing features but we must not be conservative about design of the websites. The website is a front end of the company and every company must distinguish itself from others. Thus allowing every site to be as different as possible is essential to our business.
Sure, there is always some great jQuery plugin that does the job. But sooner then later you will end up supporting five slightly different jQuery plugins that do almost the same thing. And once you include the support of particular plugin into CMS release then you become responsible for maintenance of the plugin for a whole life cycle of a website. It results in waste of time and money. You will need other solution soon.
And this is why I started Elixon Theatre.
30. Rcarousel is a jQuery UI continuous carousel with many cool features. It is highly customizable and supports even olderbrowsers (No IE6, please).
Features:
simple to use:
Now rcarousel is very simple to use. Just add some elements into a container and run the widget on it!
highly customizable:
rcarousel does not force you to use one pre-defined theme. You can add your own custom navigation with no effort!
many options to choose from:
There are many options to choose from. Configure your carousel whatever you like!
Any element:
As of 1.1 version you can use hopefully any HTML element inside a carousel. To illustrate this, take a look at the carousel I used at the top of the page.
images with links:
As of 1.1 version there is no problem with wrapping IMG elements with links. Another nice feature!
Multiple carousels:
You can add as many carousels as you like to a page without a problem. To see a working example, take a look atmulti carousels example.
Vertical carousels:
rcarousel supports also vertical orientation of carousels.
Loading elements on demand:
With the help of append method, you can load elements on demand. It can come in handy in AJAX calls.
Auto mode:
Thanks to the Auto mode you do not even have to use navigation.
cool pagination:
The pagination algorithm that is a part of rcarousel allows you to use a custom number of visible elements and a step to scroll by.
simple API:??? ????? ? ????
Available API allows you to control rcarousel at the run-time!
