Responsive

Overview

Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see what happens with Items and Navigations.

About responsive option

Setting of the responsive is very simple. Structure of responsive option:

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:

• Each breakpoint key can be a Number value (like in example) or a string: '480'.
• Owl has an in-built sort option but it’s best to set from the smallest screens to the widest.
• Responsive options always overwrite top level settings.
• As default, the responsive option is set to true so carousel always tries to fit the wrapper (even if media queries are not support IE7/IE8 etc).
• If you have non flexible layout then set 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.