Owl Carousel

All modular elements can be readily used and customized in every layout across pages.

HTML
<div data-dots="true" data-nav="true" data-items='{"0":{"items":2},"600":{"items":2}}' data-autoplay="true" data-margin="30" data-loop="true" class="owl-carousel owl-theme owl-nav-outer owl-dot-round">
	<div class="item"><img src="assets/images/s-01.jpg" class="radius-primary object-fit-cover"/></div>
	<div class="item"><img src="assets/images/s-02.jpg" class="radius-primary object-fit-cover"/></div>
	<div class="item"><img src="assets/images/s-03.jpg" class="radius-primary object-fit-cover"/></div>
	<div class="item"><img src="assets/images/s-04.jpg" class="radius-primary object-fit-cover"/></div>
	<div class="item"><img src="assets/images/s-05.jpg" class="radius-primary object-fit-cover"/></div>
	<div class="item"><img src="assets/images/s-06.jpg" class="radius-primary object-fit-cover"/></div>
</div>
JavaScript
<script src="assets/lib/owl.carousel/dist/owl.carousel.min.js"></script>
CSS
<link href="assets/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
Navigation positions and shapes

Use the following classes or their combinations along with .owl-carousel.owl-theme to update the navigtation and dots scheme:

  1. .owl-dots-inner
  2. .owl-dot-round
  3. .owl-nav-outer
  4. .owl-nav-square
Options
Option Value
data-dots boolean
data-nav boolean
data-items 
{
	"0":{"items":2},
	"600":{"items":3},
	"1000":{"items":4}
}
data-autoplay boolean
data-margin number
data-loop boolean

For more examples see Owl Carousel Documentation ⟶

Jump into