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