Responsive options.

Descripton

Example of setting up responsive Owl. As not every option is able to use responsive abilities, soon i will provide list of non responsive options.


//Javascript

$('.owl-carousel').owlCarousel({
	loop:true, // loop is true up to 1199px screen.
	nav:true, // is true across all sizes
	margin:10, // margin 10px till 960 breakpoint
	responsiveClass:true, // Optional helper class. Add 'owl-reponsive-' + 'breakpoint' class to main element.
						
	// Object keys can be Numbers (like in this example) or Strings: '480'
	// Owl has build in sort option
	// Setting from widest screen to smallest still work.

	responsive:{
		0:{
			items:1 // In this configuration 1 is enabled from 0px up to 479px screen size 
		},

		480:{
			items:2, // from 480 to 677 
			nav:false // from 480 to max 
		},

		678:{
			items:4, // from this breakpoint 678 to 959
			center:true // only within 678 and next - 959
		},

		960:{
			items:5, // from this breakpoint 960 to 1199
			margin:20, // and so on...
			center:false 

		},

		1200:{
			items:6,
			loop:false,
			margin: 30,
		}
	}
});