<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="owlslider owl-carousel owl-theme">
    <div target="1" class="item"><h4>1</h4></div>
    <div target="2" class="item"><h4>2</h4></div>
    <div target="3" class="item"><h4>3</h4></div>
    <div target="4" class="item"><h4>4</h4></div>
 
</div>


 .owl-carousel .item {
    height: 10rem;
    background: #009688;
    display: flex;
    justify-content: center;
    align-items: center; font-size:70px; color:#fff;
}

 
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
  autoplay:true,
    nav:true,
    responsive:{
        0:{
            items:1.5
        },
        
        1000:{
            items:3.5
        }
    }
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.