Basic

Put one div per slide inside Carousel and give each a height, here full-width photos with arrows on the sides.

Arrows

Set arrows to show previous and next buttons, and infinite={false} to stop at the first and last slide.

Fade

Set effect to fade to cross-fade between slides in place instead of sliding them.

Dot placement

Set dotPlacement to move the dots to any edge, and start or end also turns the carousel vertical.

Autoplay

Pass autoplay an object with dotDuration to fill the active dot as a progress bar, and autoplaySpeed to set the interval.

Multiple slides

Set slidesToShow to show several slides at once and slidesToScroll to choose how many each step moves.

Centered mode

Set centerMode to center the active slide with its neighbors peeking in, and centerPadding for how much of them shows.

Responsive slide count

Pass responsive a list of breakpoints to show fewer slides as the window gets narrower.

Custom controls

Call next, prev and goTo on the carousel's ref to move it from your own buttons.

In context

The component inside real screens, with the components it usually sits beside.
A photo gallery whose thumbnail row moves the main carousel with goTo and follows it through afterChange.

Testimonials

A testimonial rotator on the page background, with the dots recolored so they show on a light slide.

API Reference