95 lines
1.7 KiB
Handlebars
95 lines
1.7 KiB
Handlebars
---
|
|
title: Basic Demo
|
|
subTitle: Basic
|
|
nav: demos
|
|
description: Basic usage demo
|
|
sort: 1
|
|
|
|
tags:
|
|
- demo
|
|
- core
|
|
---
|
|
|
|
<div class="owl-carousel owl-theme">
|
|
<div class="item"><h4>1</h4></div>
|
|
<div class="item"><h4>2</h4></div>
|
|
<div class="item"><h4>3</h4></div>
|
|
<div class="item"><h4>4</h4></div>
|
|
<div class="item"><h4>5</h4></div>
|
|
<div class="item"><h4>6</h4></div>
|
|
<div class="item"><h4>7</h4></div>
|
|
<div class="item"><h4>8</h4></div>
|
|
<div class="item"><h4>9</h4></div>
|
|
<div class="item"><h4>10</h4></div>
|
|
<div class="item"><h4>11</h4></div>
|
|
<div class="item"><h4>12</h4></div>
|
|
</div>
|
|
|
|
{{#markdown }}
|
|
### Overview
|
|
|
|
Basic usage of Owl Carousel. I used `loop:true` and `margin:10`. The structure works with any kind of DOM element. In all of my examples i used `<div class="item">...</div>` but you could put any other element `div/span/a/img...`
|
|
|
|
### Setup
|
|
```
|
|
$('.owl-carousel').owlCarousel({
|
|
loop:true,
|
|
margin:10,
|
|
nav:true,
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
},
|
|
600:{
|
|
items:3
|
|
},
|
|
1000:{
|
|
items:5
|
|
}
|
|
}
|
|
})
|
|
```
|
|
### html
|
|
```
|
|
<div class="owl-carousel owl-theme">
|
|
<div class="item"><h4>1</h4></div>
|
|
<div class="item"><h4>2</h4></div>
|
|
<div class="item"><h4>3</h4></div>
|
|
<div class="item"><h4>4</h4></div>
|
|
<div class="item"><h4>5</h4></div>
|
|
<div class="item"><h4>6</h4></div>
|
|
<div class="item"><h4>7</h4></div>
|
|
<div class="item"><h4>8</h4></div>
|
|
<div class="item"><h4>9</h4></div>
|
|
<div class="item"><h4>10</h4></div>
|
|
<div class="item"><h4>11</h4></div>
|
|
<div class="item"><h4>12</h4></div>
|
|
</div>
|
|
```
|
|
|
|
{{/markdown }}
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
var owl = $('.owl-carousel');
|
|
|
|
owl.owlCarousel({
|
|
margin:10,
|
|
nav:true,
|
|
loop:true,
|
|
responsive:{
|
|
0:{
|
|
items:1
|
|
},
|
|
600:{
|
|
items:3
|
|
},
|
|
1000:{
|
|
items:5
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
</script> |