How to set the width responsively in owl.carousel.js?

Question

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    items : 3,
    lazyLoad : true,
    autoPlay : true,
    navigation : true,
    navigationText :  false,
    pagination : false,
  });
});

Here its my script. I want to display three or more items in mobileview also.I refer the some answers and place it in the script but it will not accept it, the width will take from the js file..

Answer 1

The setting of the responsive structure to add your CSS file

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,
        ...
    }
}

Add the owl-carousel script add your js file

$('.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
        }
    }
})

Here the documentation link: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html