package.docs_src.templates.pages.demos.responsive.hbs Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of owl.carousel Show documentation
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
The newest version!
---
title: Responsive Demo
subTitle: Responsive
nav: demos
description: How to use responsive options
sort: 2

tags:
- demo
- core
---


	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12


{{#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.





#### 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 }}




{{#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 }}