<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: #f04124;
    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
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
});


var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
   alert("Slider Changed");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.