Overview

Responsive选项可用于设置breakpoints和额外的选项。缩放你的浏览器看看导航和旋转木马如何变化。

关于responsive 选项

设置responsive非常简单。responsive参数的结构如下:

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:

• 每一个breakpoint关键点可以是一个数字或一个字符串： '480'。
• Owl有一个内置排序选项，该旋转在小屏幕上设置要比在大屏幕上设置要好。
• Responsive参数选项总是会覆盖最顶级的设置。

默认情况下，responsive参数选项设置为true，所以旋转木马总是试图匹配容器的宽度和高度（甚至是在media queries不被支持的IE7/IE8中也是如此）

• 如果你使用flexible布局那么设置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.