Auto Play Owl Slider In Testimonial

Auto Play & control  Owl slider

For supporting document file:-

https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html 


 Css path of the files:-

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

  <link rel="stylesheet" href="css/owl.carousel.css">

  

 Js path of the files:-

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script src="js/owl.carousel.min.js"></script>

HTML

<div class="slider-cont">

        

        <div class="owl-carousel owl-theme">

        <div class="item"><img src="imges/1.jpg"/></div>

        <div class="item"><img src="imges/2.jpg"/></div>

        <div class="item"><img src="imges/3.jpg"/></div>

        <div class="item"><img src="imges/4.jpg"/></div> 

        <div class="item"><img src="imges/1.jpg"/></div>

        <div class="item"><img src="imges/2.jpg"/></div>

        <div class="item"><img src="imges/3.jpg"/></div>

        <div class="item"><img src="imges/4.jpg"/></div> 

        <div class="item"><img src="imges/1.jpg"/></div>

        <div class="item"><img src="imges/2.jpg"/></div>

        <div class="item"><img src="imges/3.jpg"/></div>

        <div class="item"><img src="imges/4.jpg"/></div> 

 </div>

  

   </div>

CSS

.slider-cont{ width:600px; float:left; height:100px; margin-top:200px; left:50px; position:absolute; top:100px !important; display:block;}

.owl-prev{background-color: #eee;

border: 1px solid #000;

border-radius: 4px;

left: -35px;

padding: 4px 11px;

position: absolute;

top: 45px;}

.owl-next{background-color: #eee;

border: 1px solid #000;

border-radius: 4px;

padding: 4px 11px;

position: absolute;

top: 45px; right:-35px; }

 

Js

<script type="text/javascript">

$(document).ready(function(e) {

$('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    nav:true,

slideSpeed : 1000,

    autoplay: true,

loop: true,

navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],

responsive:{

        0:{

            items:1

        },

        600:{

            items:3

        },

        1000:{

            items:5

        }

    }

})

});

</script>