Owl Carousel 2.1.0 Responsive

Demo responsive with autoWidth : true. But it is not effective.

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>
<span class="customPrevBtn">prev</span>
<span class="customNextBtn">next</span>

CSS

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
		position:relative;
}
.owl-carousel .owl-prev{
	 position:absolute;
	 top:0; left:0;
	 display:block;
	 height:99%;
	 width:90px;
	 background:red;
}
.owl-carousel .owl-next{
	 position:absolute;
	 top:0; right:0;
	 display:block;
	 height:99%;
	 width:90px;
	 background:red;
}
.owl-prev,.owl-next{
	opacity:0;
}

JavaScript

$('.owl-carousel').owlCarousel({
		stagePadding: 100,
    loop: true,
    margin: 10,
    nav:true,
    autoplay:true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    responsive: {
        0: {
            items: 1
        },
        470: {
            items: 3
        },
        768: {
            items: 4
        },
        1199: {
            items: 5
        }
    }
});
// Go to the next item
$('.customNextBtn').click(function() {
    $('.owl-carousel').trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    $('.owl-carousel').trigger('prev.owl.carousel', [300]);
})