Responsive Center Merge Auto Width Url Hash Nav Events Stage Padding rtl Lazyload Video Animate Autoplay Auto Height Mousewheel

Responsive

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

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

List of responsive only on load

  • startPosition
  • URLhashListener
  • navText
  • dotData
  • lazyLoad
  • lazyContent
  • autoplayHoverPause
  • responsiveBaseElement
  • responsiveClass
  • video
  • videoHeight
  • videoWidth
  • nestedItemSelector
  • itemElement
  • stageElement
  • navContainer
  • dotsContainer
  • and all classes options