One moment, we're cooking some code examples
Present your items dynamically with a captivating carousel display.
The Carousel is a lightweight and feature-rich library designed to create responsive and customizable sliders or carousels for websites. It allows you to display content such as images, text, or cards in an engaging, scrollable layout that works seamlessly across all devices. With its robust set of options, it enables effortless customization to suit various design and functionality needs.
Whether you're showcasing a gallery, creating a product slider, or displaying testimonials, it is easy to implement and offers smooth performance, touch support, and flexible configurations. Below, you'll find examples and guides to help you get started quickly and make the most of its features.
A carousel with basic styling and default functionality. Every item is wrapped in a <div class="Item">
Carousel HTML
Carousel Javascript
The most common used Carousel options and arguments
| Key | Value | Type |
|---|---|---|
items | The number of items you want to display | int |
loop | Infinite loop or not | boolean |
center | Choose to center the item | boolean |
margin | The margin in between your items | int |
stagepadding | padding left and right on the main container | int |
dots | Display the indicator dots | boolean |
nav | Display the nav | boolean |
navtext | Array with HTML elements | array |
autoplay | Automatically play the carousel | boolean |
autoplayTimeout | interval timeout between autoplay | int |
autoPlayHoverPause | Pauses the autplay on hover | int |
responsive | Use different configurations if the viewport changes | array |
respsonsiveBaseElement | If set, use width of DOM element instead of window | object |
Initializing a Carousel using some of the options above
The same simple carousel with basic styling and default functionality, but positioned outside the <div class="Container"> in order to take up the full width of the screen.
When taking up the full screen, the navigation is positioned at the bottom of the carousel, as to not take up screen space.
Inline Carousels automatically adjust their dimensions based on their parent container rather than the viewport. To enable this functionality, simply add the class ResizableCarousel. The carousel leverages ResizeSensor() to dynamically resize according to its parent container. The carousel will automatically re-initialize on resize.
Try to resize the demo's container by simply dragging it in order to test this functionality.
Common issues you may encounter are carousel items that are not equal height, for example when using images with different dimensions.
Simply use display: flex to make them equal height:
Carousel display flex