One moment, we're cooking some code examples
Present your items dynamically with a captivating carousel display.
Owl 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, Owl Carousel enables effortless customization to suit various design and functionality needs.
Whether you're showcasing a gallery, creating a product slider, or displaying testimonials, Owl Carousel 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">
Owl-carousel HTML
Owl-carousel Javascript
The same simple carousel with basic styling and default functionality, but positioned outside the <div class="Container">.
The most common used owl-carousel options and arguments
| Key | Value | Type |
|---|---|---|
| Items | The number of items you want to display | int |
| Margin | The margin in between your items | int |
| Loop | Infinite loop or not | bool |
| Center | Choose to center the item | bool |
| Nav | Display the nav | bool |
| Dots | Display the indicator dots | bool |
| Autoplay | Automatically play the carousel | bool |
Common issues you may encounter are owl items that are not equal height, for example when using images with different dimensions.
Simply use display: flex to make them equal height:
Owl-carousel display flex
Equal item height
Explain how powerful your carousel can be
- Images
- Cards
- Combination with razorboxes
- Even videos