Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Example

Slide 1

Slide 2

Slide 3

<div class="owl-carousel text-center" data-nav="true" data-margin="20" data-loop="true" data-dots="true">
  <div class="card card-equal equal-50">
    <div class="stretch bg-green">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 1</h3>
      </div>
    </div>
  </div>
  <div class="card card-equal equal-50">
    <div class="stretch bg-blue">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 2</h3>
      </div>
    </div>
  </div>
  <div class="card card-equal equal-50">
    <div class="stretch bg-red">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 3</h3>
      </div>
    </div>
  </div>
</div>

Multiple

Slide 1

Slide 2

Slide 3

Slide 4

<div class="owl-carousel" data-items="[3,3,2,1]" data-margin="20" data-loop="true" data-nav="true"> 
  <div class="card card-equal equal-150">
    <div class="stretch bg-green">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 1</h3>
      </div>
    </div>
  </div>
  <div class="card card-equal equal-150">
    <div class="stretch bg-red">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 2</h3>
      </div>
    </div>
  </div>
  <div class="card card-equal equal-150">
    <div class="stretch bg-blue">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 3</h3>
      </div>
    </div>
  </div>
  <div class="card card-equal equal-150">
    <div class="stretch bg-yellow">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 4</h3>
      </div>
    </div>
  </div>
</div>