NO LONGER BETA! A fully responsive carousel jQuery UI Widget that works on desktop browsers, iPhones, iPads, and Androids. Touch devices can touch-swipe. Others can use the left/right nav arrows or mouse drag. It uses CSS3 Transitions for animations but falls back to jQuery animations for browsers without CSS3 Transition support. The code has been heavily optimized to avoid page reflows (faster, more responsive experience for the user). It even plays nicely with the lazyLoad.js plugin. Even though it is a jQuery UI widget, the cost in bytes is reasonable since you don't need the entire UI library, just core and widget. Overall, I think you'll enjoy using this widget on your next project. :-)
MIT License
Obviously, this repo is no longer maintained. However, if you still use jQuery UI, drop me a line and I might help. In the meantime, check out my new carousel for React, Pure React Carousel [github] [demo]
A fully responsive carousel jQuery UI widget that works on desktop browsers, iPhones, iPads, and even older Androids.* It can be configured to respond to touch events, mouse events, or both. You can use the left and right arrows and/or use your finger or mouse to swipe the carousel left and right. Combine with the popular lazyLoad.js plugin to lazy load images in your carousel, thus cutting page load times (great for mobile). The code is currently is in the form of a jQuery UI widget and relies on hammer.js to handle the touch events.
You don't need all of jQuery UI or any of the theme assets (images, css, etc). All you need is the jQuery UI core and the widget factory. Here is a link to the download page with the minimum jQuery UI options checked for you. LINK
See it in Action:
*The carousel animation runs a little slow on some older Androids that don't support CSS3 transitions. If Facebook's javascript API is also included on the page it will further slow down older Androids because Facebook causes page reflows every few milliseconds.
Please help me out by testing on other browsers so I can add to the support list. I have tested this on the following browsers:
How many KB does it take to get your Note: These are non-gzipped sizes. Using gzip compression on your server can decrease sizes even more.
Total overhead (without gzip): 54.4kb (However, you're already using jQuery on your site for other things, so the overhead is really 22.4kb, and if you are already using jQuery UI, then overhead added by this script drops to 14.4kb.)
This code was born out of necessity. I needed a swipe-able carousel that would work on Androids* as well as iOS devices. There were a lot of responsive carousels, but none of the ones I found worked on older Androids. If they did, they often had reduced functionality. They also usually added a lot of HTML that I couldn't easily alter.
I took care to minimize the number of reflows caused by the code. I used the timeline tool in Chrome to find and eliminate all but the most-necessary reflows. I also use fast CSS3 transitions that fall back to jQuery's default $.animation() method.
Please report any bugs encountered! I will fix em'
Here are the default options:
{
options: {
arrowLeft: '.arrow-left',
arrowRight: '.arrow-right',
mask: '.slider-mask',
target: 'ul',
unitElement: 'li',
unitWidth: 'inherit',
responsiveUnitSize: null,
onRedraw: null,
ondragstart: null,
ondragend: null,
dragEvents: false,
easing: 'linear',
speed: 400,
slideSpeed: 2500,
step: -1,
responsiveStep: null,
onShift: null,
cssAnimations: Modernizr.csstransitions,
nudgeThreshold: 10,
infinite: false,
delta: 1,
dragVertical: false,
dragPreventDefault: false,
lazyload: false // work with lazyload.js plugin http://www.appelsiini.net/projects/lazyload
},
}
A css selector representing the left arrow. NOTE: This should be a span or other element instead of an anchor tag. Our responsiveCarousel script lets you hold down the arrow buttons for continuous scrolling. If the arrows are anchor tags, Android devices will prompt you to save the target URL for the anchor. It's impossible to turn this "feature" off. Don't make the arrows anchors or buttons. I recommend div or span elements. the script will attach the correct event listeners. You just need to add css so when the mouse hovers over your arrow element, it gets the same pointer as an anchor tag.
Your arrow tags can be ANYWHERE on the page. They do not need to be children of the DOM element where you attached responsiveCarousel. Heck, you can even attach the carousel to $(document) if you like. You can also set your select in such a way that you can have multiple buttons that control the slider.
See above.
A css selector representing the immediate parent of the the target element. This element has visibility set to "overflow hidden" and helps us give the illusion of a horizontal scroll. Do not give the mask CSS borders, margins or padding.
A css selector representing the actual DOM element that will slide behind the masking dom element. Usually this is an unordered list containing list elements. Do not give CSS borders, margin, or padding to the target.
A css selector representing the child elements of target. Usually, these are list elements. Do not apply border, margin, or padding to these elements. If you need spacing, add div's inside the unitElement and apply borders, padding, and margins to the div.
You're going to want to set this to 'compute' on responsive sites. 'compute' relies on the responsiveUnitSize function below to provide the number of units to show in the carousel at a particular width. See example 1 for details.
The default, 'inherit', inherits the width from your current CSS and is best suited for static, non-responsive sites.
There is a new option added in 1.5, 'individual'. This lets you have list elements of different (read: non-uniform) widths. I created this so that I could have a horizontally scrolling navigation menu like some native mobile apps do. See example 5
This is only required if unitWidth is set to 'compute'. See full details in the "Callback Options" section of the documentation.
Setting this to "true" enables touch & mouse drag events. false turns them off. Hint: Modernizr's property, Modernizr.touch, returns a boolean true or false. You can enable "mousedrag" events on desktop computers if this is set to true for non-touch devices. Note: mousedrag only works best on carousels that do not contain images or anchor tags, as your browser lets you drag images and anchors to new tabs so you can open them. This is built-in browser behavior that is hard to prevent reliably across all browsers.
Used when "cssAnimations" option is set to boolean true. This is the same as the css-animation-timing property options for CSS3 transitions. To recap, they are: 'linear','ease','ease-in','ease-out','ease-in-out', and 'cubic-bezier(n,n,n,n)' More details here
Number milliseconds it takes to scroll one unitWidth to the left or right when you click on an arrow or during the slide show.
Number of milliseconds to pause on each slide in a slideshow.
How many unitWidths to move to the left or right during a slide show. -1 moves 1 unitWidth to the left. Positive numbers move to the right. Hint: You can go by groups of four or five. Set this option to a function that returns an integer for more dynamic / responsive results.
If the browser supports css3, then we use the much faster css3 transitions. Otherwise, fall back to slower (on older devices) jQuery animations.
The minimum amount of pixels the user must drag the target before we force a slide one unit to the left or right. If your carousel scrolls too easily on mobile devices when you scroll the page vertically, you can increase this value. Just make sure that it's generally less than 1/3 the minimum width you anticipate for each carousel unit element.
Set this to true to have infinite scrolling. This means when you reach the ends of carousel, the carousel starts over again. Hint: Combine infinite with toggleSlideShow() to have an infinite slide show. See Example 3 and Example 4
A force-multiplier for dragging slides, like a lever, that increases the speed the carousel moves when you drag it from side to side. The larger the number, the faster your slider will slide to the left or right when dragging.
Use the Lazy Load plugin for jQuery in combination with this plugin. Carousels exist so they can contain a lot of information "above the fold" (I know, there is no fold on the Interwebz, but clients still ask for stuff above it.) As a result a lot of images can load that aren't even used unless the user interacts with the carousel. To use this option, include lazyLoad.js in your page and format your image tags according to that plug-in's documentation. When the carousel is created, all the visible images are loaded by default but the images that are not visible are deferred until the user starts to interact with the carousel by pressing the navigation arrows, moving their mouse over the carousel, or using their finger to drag the carousel.
<img data-original=“img/example.jpg” src=“img/grey.gif”>
Arguments passed to this function by responsiveCarousel are: $el, internal, options. This is only used if your unitWidth is set to 'compute'. It is a callback function that should return an integer representing the number of unitElements that should be visible in the carousel at one time. See the examples (Example 1, Example 2) for more details. Here is an example of usage below.
var winW;
$(window).on('resize',function(){
winW = $(window).width();
});
$elem.responsiveCarousel({
infinite: false,
target: '.slider-target',
unitElement: '.slider-target > li',
mask: '.slider-mask',
arrowLeft: '.arrow-left',
arrowRight: '.arrow-right',
unitWidth: 'compute',
dragEvents: Modernizr.touch,
responsiveUnitSize: function () {
var i = 4;
if ( winW < 800 ) { i = 3; }
if ( winW < 600 ) { i = 2; }
if ( winW < 400 ) { i = 1; }
return i;
}
});
A callback function that fires whenever something happens that would affect the size of stuff in the slider, e.g. when the carousel is first created, after a window resize, after an image gets loaded in the carousel, etc. Arguments passed to this function by responsiveCarousel are: $el, internal, options. Can be called manually to. See examples. (Example 1, Example 2)
A callback function that is fired when dragging starts. Arguments passed to this function by responsiveCarousel are: options, internal.
A callback function that is fired when dragging ends. Arguments passed to this function by responsiveCarousel are: options, internal.
NOT IMPLEMENTED YET: It will be a function that returns an integer representing the number of unitWidths to slide during a slide show or when arrows are pressed.
A callback function that is triggered after the carousel is moved to the left or right any amount of unitWidths. Arguments passed to this function by responsiveCarousel are: i (the number of the current left-most visible slide starting from 0). Could for triggering other events on the page. based on the current left-most visible slide. See example 2 to see this in use. Note for IE8: If you use custom web fonts (glyphs) in any of the slides, or for signposts (signposts = those dots in the slideshow example) then don't use [data-icon]:before to insert the glyphs. It will cause onShift to seem like it's miss-firing.
Since this is a jQuery UI widget, you can call these public methods like so:
$([CSS Selector]).responsiveCarousel('[method name]', [arguments]);
Starts up the slide show.
Derrrrrr. Stops the slide show.
Starts / stops the slide show. You might want a button or anchor tag someplace to turn on the slide show, or add it to a dom-ready event for an auto-start feature. Example of usage:
$('#example-2').responsiveCarousel('toggleSlideShow');
Force a redraw of the carousel. THIS IS HANDY IF YOUR CAROUSEL WAS HIDDEN. Elements that are hidden on page load have no dimensions. You will need to call redraw once they become visible. Example of usage:
$('.some-button').toggle('#slider-wrap');
if ($('#slider-wrap').is(':visible')) {
$('#example-2').responsiveCarousel('redraw');
}
Jump to slide i (numbering starts at zero). Set "a" to true to use animation. Set "a" to false to just jump to the slide without animation. If you leave out "a", it defaults to true.
Clean up all event handlers and HTML added by this widget.