<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>



<div class="owl-carousel owl-theme">
  
    <div class="item">      
      <h4>1</h4>
         <h4>5</h4>      
      </div>
  
      <div class="item">      
      <h4>2</h4>
         <h4>6</h4>      
      </div>
  
      <div class="item">      
      <h4>3</h4>
         <h4>7</h4>      
      </div>
  
      <div class="item">      
      <h4>4</h4>
         <h4>8</h4>      
      </div>

</div>

  h4 {
    height: 10rem;
    background: #009688;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    color: #fff;
    margin: 10px;
    border-radius: 10px;
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
   autoplay:true,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.