🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Carousel v2

Display a list of items and navigate through them.

Copy: View demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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:

Control alignment

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 -->


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us