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
<!-- One item + Nav top + Dots + 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>// One item + Nav top + Dots + 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")
<!-- One item + Nav bottom + No loop -->
<div class="owl-carousel owl-nav-bottom" data-owl-carousel='{ "nav": true, "dots": false, "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>// One item + Nav bottom + No loop
.owl-carousel.owl-nav-bottom(data-owl-carousel='{ "nav": true, "dots": false, "loop": false }')
+image("path-to-image", "Carousel Image")
+image("path-to-image", "Carousel Image")
+image("path-to-image", "Carousel Image")
<!-- 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"/>
</div>// One item + Nav bottom + No loop
.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")
<!-- Content carousel -->
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30 }'>
<div class="media">...</div>
<div class="media">...</div>
<div class="media">...</div>
</div>// Content carousel
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30 }')
.media ...
.media ...
.media ...
<!-- Default Bootstrap carousel -->
<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>
<div class="carousel-item">
<img src="path-to-image" alt="Carousel Image"/>
</div>
<div class="carousel-item">
<img src="path-to-image" alt="Carousel Image"/>
</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>// Default Bootstrap carousel
#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-item
+image("path-to-image", "Carousel Image")
.carousel-item
+image("path-to-image", "Carousel Image")
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