215 lines
3.8 KiB
Handlebars
215 lines
3.8 KiB
Handlebars
---
|
||
title: Responsive Demo
|
||
subTitle: Responsive
|
||
nav: demos
|
||
description: How to use responsive options
|
||
sort: 2
|
||
|
||
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
|
||
|
||
> Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see what happens with Items and Navigations.
|
||
|
||
|
||
#### About responsive option
|
||
|
||
Setting of the responsive is very simple. Structure of responsive option:
|
||
|
||
```
|
||
responsive : {
|
||
|
||
// breakpoint from 0 up
|
||
0 : {
|
||
option1 : value,
|
||
option2 : value,
|
||
...
|
||
},
|
||
|
||
// breakpoint from 480 up
|
||
480 : {
|
||
option1 : value,
|
||
option2 : value,
|
||
...
|
||
},
|
||
|
||
// breakpoint from 768 up
|
||
768 : {
|
||
option1 : value,
|
||
option2 : value,
|
||
...
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
### Key facts:
|
||
|
||
* Each breakpoint key can be a Number value (like in example) or a string: '480'.
|
||
* Owl has an in-built sort option but it’s best to set from the smallest screens to the widest.
|
||
* Responsive options **always** overwrite top level settings.
|
||
* As default, the responsive option is set to true so carousel always tries to fit the wrapper (even if media queries are not support IE7/IE8 etc).
|
||
* If you have non flexible layout then set `responsive:false`.
|
||
|
||
|
||
### Live Example
|
||
```
|
||
$('.owl-carousel').owlCarousel({
|
||
loop:true,
|
||
margin:10,
|
||
responsiveClass:true,
|
||
|
||
responsive:{
|
||
0:{
|
||
items:1,
|
||
nav:true
|
||
},
|
||
600:{
|
||
items:3,
|
||
nav:false
|
||
},
|
||
1000:{
|
||
items:5,
|
||
nav:true,
|
||
loop:false
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
----
|
||
|
||
### Responsive related options:
|
||
|
||
|
||
#### responsiveClass
|
||
|
||
Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.
|
||
|
||
|
||
#### responsiveBaseElement
|
||
|
||
As default all responsive breakpoints are corresponding with `window` width. This option gives you an opportunity to change it to your own class/id like `responsiveBaseElement:".myCustomWrapper"`
|
||
|
||
#### responsiveRefreshRate
|
||
|
||
What this does is wait 200ms after you changed the browser width and performs refresh actions (calculating widths/ cloning items etc.) Default refresh rate is 200ms. I think this rate is optimal but you can change it if it’s to slow for you.
|
||
|
||
As not every option is able to use responsive abilities, here’s a full list of responsive options.
|
||
|
||
<div class="row">
|
||
<div class="large-6 columns">
|
||
|
||
|
||
#### List of responsive options
|
||
|
||
* items
|
||
* loop
|
||
* center
|
||
* mouseDrag
|
||
* touchDrag
|
||
* pullDrag
|
||
* freeDrag
|
||
* margin
|
||
* stagePadding
|
||
* merge
|
||
* mergeFit
|
||
* autoWidth
|
||
* autoHeight
|
||
* nav
|
||
* navRewind
|
||
* slideBy
|
||
* dots
|
||
* dotsEach
|
||
* autoplay
|
||
* autoplayTimeout
|
||
* smartSpeed
|
||
* fluidSpeed
|
||
* autoplaySpeed
|
||
* navSpeed
|
||
* dotsSpeed
|
||
* dragEndSpeed
|
||
* responsiveRefreshRate
|
||
* animateOut
|
||
* animateIn
|
||
* fallbackEasing
|
||
* callbacks
|
||
* info
|
||
* and all events
|
||
{{/markdown }}
|
||
|
||
</div>
|
||
<div class="large-6 columns">
|
||
|
||
{{#markdown }}
|
||
#### List of responsive only on load
|
||
|
||
* startPosition
|
||
* URLhashListener
|
||
* navText
|
||
* dotsData
|
||
* lazyLoad
|
||
* lazyContent
|
||
* autoplayHoverPause
|
||
* responsiveBaseElement
|
||
* responsiveClass
|
||
* video
|
||
* videoHeight
|
||
* videoWidth
|
||
* nestedItemSelector
|
||
* itemElement
|
||
* stageElement
|
||
* navContainer
|
||
* dotsContainer
|
||
* and all classes options
|
||
{{/markdown }}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
$('.owl-carousel').owlCarousel({
|
||
loop:true,
|
||
margin:10,
|
||
responsiveClass:true,
|
||
|
||
responsive:{
|
||
0:{
|
||
items:1,
|
||
nav:true
|
||
},
|
||
600:{
|
||
items:3,
|
||
nav:false
|
||
},
|
||
1000:{
|
||
items:5,
|
||
nav:true,
|
||
loop:false,
|
||
margin:20
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|