Framer code component

An infinite carousel with the neighbours in view

An infinite carousel with the neighbours in view

An infinite carousel with the neighbours in view

Three layouts, captions with a blurred plate, and navigation by click, drag, arrow keys or autoplay. Loops in both directions forever.

Three layouts, captions with a blurred plate, and navigation by click, drag, arrow keys or autoplay. Loops in both directions forever.

Three layouts, captions with a blurred plate, and navigation by click, drag, arrow keys or autoplay. Loops in both directions forever.

Three layouts

Drag and arrow keys

Autoplay

Infinite both ways

Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3
Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3
Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3

Layouts & behaviour

The same carousel, three ways

The same carousel, three ways

The same carousel, three ways

The carousel above is the Parallax layout. Below are the other two, plus the pagination and autoplay options. Every demo runs the same three slides.

The carousel above is the Parallax layout. Below are the other two, plus the pagination and autoplay options. Every demo runs the same three slides.

Single

One card, full width — what every layout falls back to on a phone.

Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3

Coverflow

Neighbours scaled back and dimmed behind the active card.

Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3

Parallax + pagination

Autoplay every 3.5s, pausing on hover, with dots and a counter.

Two figures at a surreal garden table

Two figures at a surreal garden table, soft blue plaid.

Slide 1 of 3

Settings

Set the behaviour, not the pixels

Set the behaviour, not the pixels

Set the behaviour, not the pixels

The look is tuned and baked in. What is left is what actually changes from project to project — the layout, how people move through it, and whether it sits on a dark or a light page.

The look is tuned and baked in. What is left is what actually changes from project to project — the layout, how people move through it, and whether it sits on a dark or a light page.

Slides

An array of image, caption and an optional icon for each slide.

Layouts

Parallax with both neighbours peeking, a single full-width card, or a scaled-back coverflow.

Theme

Dark or light. The captions, buttons, dots and counter all follow it.

Navigation

Click the side cards or the buttons, drag the centre card, or use the arrow keys.

Autoplay

Any interval from 1 to 20 seconds, pausing while the pointer is over the slider.

Pagination

Dots, a counter, both, or neither.

Responsive

Below a width you set, every layout collapses to the single card and the controls move underneath.

Captions

Off, or on a blurred plate at the top or bottom. The styling is set for you.

Accessibility

Carousel roles, labelled buttons, a live region announcing each slide, and reduced-motion support.

Parallax Carousel

Parallax Carousel

Parallax Carousel

One code component — framer-motion only — infinite in both directions

Create a free website with Framer, the website builder loved by startups, designers and agencies.