Carousel

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

General information

You can render a carousel item with just two elements:

  • A wrapping tag utilising the .carousel-items class

  • A set of direct child items with the .carousel-item class

Here is a very basic example 👇

<div class="carousel-items">
<div class="carousel-item">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
<div class="carousel-item">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="carousel-item">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</div>
<div class="carousel-item">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>

You don't need to add navigation bullets (they're automatically generated).

In React and Vue you can achieve the same result like this 👇

React
Vue
React
<Carousel>
<CarouselItem>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</CarouselItem>
<CarouselItem>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</CarouselItem>
<CarouselItem>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</CarouselItem>
<CarouselItem>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</CarouselItem>
</Carousel>
Vue
<c-carousel>
<c-carousel-item>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-carousel-item>
<c-carousel-item>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</c-carousel-item>
<c-carousel-item>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</c-carousel-item>
<c-carousel-item>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</c-carousel-item>
</c-carousel>

As you know, a carousel is made of a wrapping component (Carousel in React, c-carousel in Vue) and each accordion has its own component (CarouselItem in React, c-carousel-item in Vue).

Autorotate

By default, a carousel does not autorotate. You can enable this feature by setting a data-autorotate numeric value on the .carousel-items tag corresponding to the milliseconds between an item and another one.

For example, if you want your carousel to autorotate with a pause of 7 seconds between each carousel item, do like this 👇

<div class="carousel-items" data-autorotate="7000">
<div class="carousel-item">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
<div class="carousel-item">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="carousel-item">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</div>
<div class="carousel-item">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>

The autorotate feature turns off as soon as a user interacts with the carousel (clicking on bullets or swiping on touch devices).

Here is how the magic happens in React and Vue 👇

React
Vue
React
<Carousel autorotate={7000}>
<CarouselItem>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</CarouselItem>
<CarouselItem>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</CarouselItem>
<CarouselItem>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</CarouselItem>
<CarouselItem>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</CarouselItem>
</Carousel>
Vue
<c-carousel :autorotate="3000">
<c-carousel-item>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-carousel-item>
<c-carousel-item>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</c-carousel-item>
<c-carousel-item>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</c-carousel-item>
<c-carousel-item>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</c-carousel-item>
</c-carousel>

Set the first carousel item to display

By default, the first carousel item is the one displayed. If, for some reason, you want your carousel to be initialised with a different item, it can be done by assigning the .is-active class to that item. In the example below, the second element is the one that will be displayed on page load 👇

<div class="carousel-items">
<div class="carousel-item">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>
<div class="carousel-item is-active">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<div class="carousel-item">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</div>
<div class="carousel-item">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>

Use the active prop in React and Vue 👇

React
Vue
React
<Carousel active={1}>
<CarouselItem>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</CarouselItem>
<CarouselItem>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</CarouselItem>
<CarouselItem>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</CarouselItem>
<CarouselItem>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</CarouselItem>
</Carousel>
Vue
<c-carousel :active="1">
<c-carousel-item>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-carousel-item>
<c-carousel-item>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</c-carousel-item>
<c-carousel-item>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</c-carousel-item>
<c-carousel-item>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</c-carousel-item>
</c-carousel>

Items count starts from 0, so set the active prop to 1 to make the second item active.

TL;DR

The Carousel Item component has no props and it only returns the wrapping <div>around the item content.

Prop

Type

Default

Accepted values

active

number

null

Index of the item you want to be active

autorotate

number

null

Time in ms

Prop

Type

Default

Accepted values

active

number

null

Index of the item you want to be active

autorotate

number

null

Time in ms

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_carousel.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/elements/_carousel.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_carousel.scss

👆Use this to add custom CSS

Learn more about the Sass logic behind each template.