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>
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>
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>
TL;DR
<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