✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Carousel

Cruip CSS

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 👇

Carousel component

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

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

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

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

React props (Accordion Item component)

Prop Type Default Accepted values
active number null Index of the item you want to be active
autorotate number null Time in ms

Vue props (Accordion Item component)

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.
Last updated on August 17, 2021