Overview

Responsive閫夐」鍙敤浜庤缃産reakpoints鍜岄澶栫殑閫夐」銆傜缉鏀句綘鐨勬祻瑙堝櫒鐪嬬湅瀵艰埅鍜屾棆杞湪椹浣曞彉鍖栥€?/p>

鍏充簬responsive 閫夐」

璁剧疆responsive闈炲父绠€鍗曘€俽esponsive鍙傛暟鐨勭粨鏋勫涓?

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:

• 姣忎竴涓猙reakpoint鍏抽敭鐐瑰彲浠ユ槸涓€涓暟瀛楁垨涓€涓瓧绗︿覆锛?'480'銆?/li>
• Owl鏈変竴涓唴缃帓搴忛€夐」锛岃鏃嬭浆鍦ㄥ皬灞忓箷涓婅缃姣斿湪澶у睆骞曚笂璁剧疆瑕佸ソ銆?/li>
• Responsive鍙傛暟閫夐」鎬绘槸浼氳鐩栨渶椤剁骇鐨勮缃€?/li>

  榛樿鎯呭喌涓嬶紝responsive鍙傛暟閫夐」璁剧疆涓簍rue锛屾墍浠ユ棆杞湪椹€绘槸璇曞浘鍖归厤瀹瑰櫒鐨勫搴﹀拰楂樺害锛堢敋鑷虫槸鍦╩edia queries涓嶈鏀寔鐨処E7/IE8涓篃鏄姝わ級

• 濡傛灉浣犱娇鐢╢lexible甯冨眬閭ｄ箞璁剧疆responsive:false銆?/li>

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鈥檚 to slow for you.

As not every option is able to use responsive abilities, here鈥檚 a full list of responsive options.