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


Progress value is 30%

Carousel v3

Display a collection 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

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:

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