# 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