Carousel

You can alter carousel look and behaviour via flexible data API data-owl-carousel = {}:

"items": 1 How many items to display
"nav": true/false Enable/disable control arrows
"dots": true/false Enable/disable dots control
"loop": true/false Enable/disable infinite loop
"autoplay": true/false Enable/disable automatic slides transition
"autoplayTimeout": 3000 Timeou between transition. Value in ms | 1000ms = 1s
"margin": 30 Space between carousel items (in px)
"autoHeight": true/false Enable/disable smooth height transition. If items have different height
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} How many items to display on each screen size

HTML
Pug

<!-- Carousel: One item + Arrows + Dots outside + Loop -->
<div class="owl-carousel" data-owl-carousel='{ "nav": true, "dots": true, "loop": true }'>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
</div>

//- Carousel: One item + Arrows + Dots outside + Loop
.owl-carousel(data-owl-carousel='{ "nav": true, "dots": true, "loop": true }')
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")

You can alter carousel look and behaviour via flexible data API data-owl-carousel = {}:

"items": 1 How many items to display
"nav": true/false Enable/disable control arrows
"dots": true/false Enable/disable dots control
"loop": true/false Enable/disable infinite loop
"autoplay": true/false Enable/disable automatic slides transition
"autoplayTimeout": 3000 Timeou between transition. Value in ms | 1000ms = 1s
"margin": 30 Space between carousel items (in px)
"autoHeight": true/false Enable/disable smooth height transition. If items have different height
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} How many items to display on each screen size

HTML
Pug

<!-- Carousel: One item + Arrows + Dots inside + No loop -->
<div class="owl-carousel dots-inside" data-owl-carousel='{ "nav": true, "dots": true, "loop": false }'>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
</div>

//- Carousel: One item + Arrows + Dots inside + No loop
.owl-carousel.dots-inside(data-owl-carousel='{ "nav": true, "dots": true, "loop": false }')
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")

You can alter carousel look and behaviour via flexible data API data-owl-carousel = {}:

"items": 1 How many items to display
"nav": true/false Enable/disable control arrows
"dots": true/false Enable/disable dots control
"loop": true/false Enable/disable infinite loop
"autoplay": true/false Enable/disable automatic slides transition
"autoplayTimeout": 3000 Timeou between transition. Value in ms | 1000ms = 1s
"margin": 30 Space between carousel items (in px)
"autoHeight": true/false Enable/disable smooth height transition. If items have different height
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} How many items to display on each screen size

HTML
Pug

<!-- Carousel: Multiple items + Dots + Loop + Autoplay -->
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }'>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
</div>

//- Carousel: Multiple items + Dots + Loop + Autoplay
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }')
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")

For more information and settings visit official Bootstrap documentation.

HTML
Pug

<!-- Carousel: Bootstrap Default -->
<div class="carousel slide" id="carouselBSExample" data-ride="carousel">
  <ol class="carousel-indicators">
    <li class="active" data-target="#carouselBSExample" data-slide-to="0"></li>
    <li data-target="#carouselBSExample" data-slide-to="1"></li>
    <li data-target="#carouselBSExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path-to-image" alt="Carousel Image"/>
      <div class="carousel-caption d-none d-md-block">
        <h6 class="text-white text-shadow mb-1">First slide label</h6>
        <p class="text-shadow">Nulla vitae elit libero, a pharetra augue mollis interdum</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="path-to-image" alt="Carousel Image"/>
      <div class="carousel-caption d-none d-md-block">
        <h6 class="text-white text-shadow mb-1">Second slide label</h6>
        <p class="text-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="path-to-image" alt="Carousel Image"/>
      <div class="carousel-caption d-none d-md-block">
        <h6 class="text-white text-shadow mb-1">Third slide label</h6>
        <p class="text-shadow">Praesent commodo cursus magna, vel scelerisque nisl consectetur</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselBSExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselBSExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

//- Carousel: Bootstrap Default
#carouselBSExample.carousel.slide(data-ride="carousel")
  ol.carousel-indicators
    li(data-target="#carouselBSExample" data-slide-to="0").active
    li(data-target="#carouselBSExample" data-slide-to="1")
    li(data-target="#carouselBSExample" data-slide-to="2")
  .carousel-inner
    .carousel-item.active
      +image("path-to-image", "Carousel Image")
      .carousel-caption.d-none.d-md-block
        h6.text-white.text-shadow.mb-1 First slide label
        p.text-shadow Nulla vitae elit libero, a pharetra augue mollis interdum
    .carousel-item
      +image("path-to-image", "Carousel Image")
      .carousel-caption.d-none.d-md-block
        h6.text-white.text-shadow.mb-1 Second slide label
        p.text-shadow Lorem ipsum dolor sit amet, consectetur adipiscing elit
    .carousel-item
      +image("path-to-image", "Carousel Image")
      .carousel-caption.d-none.d-md-block
        h6.text-white.text-shadow.mb-1 Third slide label
        p.text-shadow Praesent commodo cursus magna, vel scelerisque nisl consectetur
  a(href="#carouselBSExample" role="button" data-slide="prev").carousel-control-prev
    span(aria-hidden="true").carousel-control-prev-icon
    span.sr-only Previous
  a(href="#carouselBSExample" role="button" data-slide="next").carousel-control-next
    span(aria-hidden="true").carousel-control-next-icon
    span.sr-only Next

You can alter carousel look and behaviour via flexible data API data-owl-carousel = {}:

"items": 1 How many items to display
"nav": true/false Enable/disable control arrows
"dots": true/false Enable/disable dots control
"loop": true/false Enable/disable infinite loop
"autoplay": true/false Enable/disable automatic slides transition
"autoplayTimeout": 3000 Timeou between transition. Value in ms | 1000ms = 1s
"margin": 30 Space between carousel items (in px)
"autoHeight": true/false Enable/disable smooth height transition. If items have different height
"responsive": {"0": {"items": 1}, "768": {"items": 2}, ...} How many items to display on each screen size

HTML
Pug

<!-- Carousel: Multiple items + Dots + Loop + Autoplay -->
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }'>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
  <img src="path-to-image" alt="Carousel Image"/>
</div>

//- Carousel: Multiple items + Dots + Loop + Autoplay
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "autoplay": true, "autoplayTimeout": 4000, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }')
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")
  +image("path-to-image", "Carousel Image")

Carousel

Code

Code

Code

Code

Code

One item + Arrows + Dots outside + Loop

One item + Arrows + Dots inside + No loop

Multiple items + Dots + Loop + Autoplay

Default Bootstrap Carousel

First slide label

Second slide label

Third slide label