✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨
Cruip CSS

Carousel

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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)

PropTypeDefaultAccepted values
activenumbernullIndex of the item you want to be active
autorotatenumbernullTime in ms

Vue props (Accordion Item component)

PropTypeDefaultAccepted values
activenumbernullIndex of the item you want to be active
autorotatenumbernullTime 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