Carousel v2

Display a list of items and navigate through them.

Dependencies

• Swipe Content
• Carousel

How to

The Carousel V2 component is used to show multiple items at the same time and loop through them.

It is based on the Carousel component. You can find the list of all availables options 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-v2.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 ↗