Brand Logo slider with Owl Carousel 2 ( Source Code )

Brand Logo slider with Owl Carousel 2 ( Source Code )

Add These files

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


HTML


<div class="brand-carousel section-padding owl-carousel"> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/t4w94PSN/logo1.png" alt=""> </div> </div>


CSS


body { background: #000; } .section-padding{ padding:60px 0; } .brand-carousel { background: #eee; margin-top: 10%; } .owl-dots{ text-align: center; } .owl-dot { display: inline-block; height: 15px !important; width: 15px !important; background-color: #222222 !important; opacity: 0.8; border-radius: 50%; margin: 0 5px; } .owl-dot.active { background-color: #FF170F !important; }

Initiate the plugin

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