Owl Carousel

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

<!-- Demos -->
<div class="owl-carousel owl-theme">
<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>


<script>
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
$(&#39;.play&#39;).on(&#39;click&#39;,function(){
owl.trigger(&#39;play.owl.autoplay&#39;,[1000])
})
$(&#39;.stop&#39;).on(&#39;click&#39;,function(){
owl.trigger(&#39;stop.owl.autoplay&#39;)
})</code></pre>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 4,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
$('.play').on('click', function() {
owl.trigger('play.owl.autoplay', [1000])
})
$('.stop').on('click', function() {
owl.trigger('stop.owl.autoplay')
})
})
</script>