Owl Carousel

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

{
	"0":{"items":2},
	"600":{"items":3},
	"1000":{"items":4}
}

For more examples see Owl Carousel Documentation ⟶