Carousel v3

Display a collection of items and navigate through them.

Dependencies

• Swipe Content
• Carousel

How to

Use the Carousel v3 component to display a collection of items and navigate through them. A preview of the next/previous elements is visible during the navigation.

It is based on the Carousel component. A list of all available options can be found on the Carousel Info page.

To modify the number of visible items, you can change the value of the --carousel-item-auto-size CSS variable (defined in the carousel-v3.scss file). You can find more info on the Carousel Info page.

Arrows Alignment #

By default, the carousel controls (arrows) are vertically centered to the carousel height. There may be cases where you want to center those controls relative to the height of a specific element (not the carousel). For example, in the screenshot below, the arrows are vertically aligned to the images:

In this case, you can add the data-align-controls attribute to the .js-carousel item and set its value equal to a unique selector of the element you want to target to align the controls.

E.g., assuming you want to align the controls to images with a .carousel__image class:

<div class="carousel carousel-v3 js-carousel" data-align-controls=".carousel__image">
  <!-- carousel content here -->
</div>

Categories

• Plugins > Carousel

Bug report & feedback

Component Github page ↗