Display and cycle through a collection of items.
All components are built upon the CodyHouse Framework.
If you're using this component, you should also include the SCSS/JS of the following components:
The Carousel component can be used to cycle through a series of items (cards, images, etc.), with the option of displaying multiple items at the same time.
You can edit the following data attributes to customize the carousel behavior:
- enable drag on touch devices: add a
data-drag="on" to the
js-carousel element (default is off);
- enable autoplay: add a
data-autoplay="on" to the
js-carousel element (default is off). Autoplay is automatically paused when user hovers over the carousel element, interacts with the carousel contents or the carousel controls;
- set a custom autoplay timing: add a
data-autoplay-interval equal to the custom duration (in milliseconds) that you want to use (default is 5000). This option is effective only if
data-autoplay is on.
Carousel Items Number
The number of items visible in a carousel cycle is determined based on:
- item mininum width: this is equal to the width of the
.carousel__item as defined in the carousel.scss file. To modify this value, you can change the
--carousel-item-auto-size CSS variable (default is 260px);
- item right margin: this will set the gap between two consecutive items. To modify this value, you can change the
--carousel-grid-gap CSS variable defined inside the carousel.scss file (default is
Bug Report & Feedback
Get in touch: suggest a component or report a bug.