Carousel

Responsive, touch-friendly carousels with natural feel. Easy to use, highly customizable and fully featured. Effortlessly combined with Fancybox or Panzoom.

Key Features

• Combines touch navigation with transition effects
• Supports any number of virtual slides
• Smart infinite navigation without cloned elements
• Multiple useful plugins that provide additional functionality, such as two types of thumbnails, zoomable content, toolbar, etc.

Examples

Basic example

1

2

3

4

5

Multiple slides

Set the width of slide elements using CSS, then the carousel will automatically create pages and center based on how many slides fit.

1

2

3

4

5

6

7

8

9

10

Vertical

1

2

3

4

5

Adaptive height

1

2

3

4

5

Drag Free

1

2

3

4

5

Align

1

2

3

4

5

Right to left

1

2

3

4

5

Autoplay plugin

1

2

3

4

5

Autoscroll plugin

1

2

3

4

5

Plugin combination

This example shows combination of multiple plugins - Arrows, Zoomable, Thumbs, Toolbar, Autoplay and Expand.

Combine with Fancybox

Synchronizing the position of Fancybox and Carousel couldn't be easier - you don't need to do any extra steps, no extra code needed. They will be synchronized automatically. Simply add data-fancybox and data-src attributes to your slide elements and then initialize Carousel and Fancybox as usual.

This example also shows modern style thumbnails provided by the Thumbs plugin.

JS Bin Example

Fade mode

With a small snippet of JavaScript, you can achieve a "fade mode" where slides fade instead of moving when dragged.

JS Bin Example

Creative

The thoughtful API makes it easy to create creative effects.

JS Bin Example