Carousel – Components

About

A flexible carousel that works on both desktop and mobile devices, and is compleletely responsive. Additionally, there is a strict separation of state and style. That is to say, javascript maintains the state of the carousel, while the CSS is responsible for the presentation and display of this state

Implementation

Flexicarousel enables a touch-based interface (ie. sliding slides via dragging) while also respecting the separation of state and behaviour. You can swipe to drag a slide yet still use CSS to control how the slide transitions will behave. You can also choose to change slides by using the exposed API. The carousel works on both desktop and mobile, using only CSS to control the look and feel. The result is a basic yet robust carousel, weighing in at under 2KB

Demo

Simple demo

Infinite, overflowing

Bounded, clipped

Infinite, scroll by 3

Prereqs

none

Compatibility

IE8+
Firefox, Chrome, Opera
iOS, Android

Code


var container = document.querySelector('#carousel');
var carousel = new Carousel(container, {
  infinite: true,
  onSlide: function() { ... }
});

container.querySelector('.prev').addEventListener('click', carousel.prev);
container.querySelector('.next').addEventListener('click', carousel.next);

API

Options

name	type	default	description
activeClass	string	active	Class to use on the active slide.
slideWrap	string	.wrap	The selector to use when searching for the slides' container. This is used only to bind touch events to, on mobile.
slides	string	li	The selector to use when searching for slides within the `slideWrap` container.
infinite	boolean	true	Enable infinite scrolling or not
onSlide	function	undefined	A function to execute on slide. It is passed `to` and `from` indices.
disableDragging	boolean	false	if you'd like to disable the touch UI for whatever reason

Methods

name	method	description
Next Slide	carousel.next()	Advance carousel to the next slide
Previous Slide	carousel.prev()	Advance carousel to the previous slide
Go To Slide	carousel.to(i)	Advance carousel to the i^th slide
Destroy	carousel.destroy()	Destroys carousel and removes all Event Listeners

Carousel.