Carousels

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Default

Image
Image
Image
Image 
<div class="owl-carousel">
  <div>...</div>
  <div>...</div>
  ...
</div>

There is a number of data attribute options to customise your carousel:

<mark>
Number of slides per viewport: [large,medium,small]
data-margin="10"
Spacing between slides in pixels
data-center="true"
Center slides
data-nav="true"
Enable carousel navigation
data-dots="true"
Enable carousel pagination
data-autoplay="true"
Enable carousel autoplay
data-loop="true"
Duplicate last and first items to get loop illusion.
data-autoheight="true"
Elements with different height will change smoothly

Default

Image
Image
Image 
<div class="owl-carousel owl-carousel-single">
  <div>...</div>
  <div>...</div>
  ...
</div>