JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<h4 class="center-align">Another Prducts</h4>
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img class = "partners-home" src="assets/img/visi/sanako_logo.jpg" alt="">
            </div>
            <div class="item">
                <img class="partners-home" src="assets/img/visi/utalk_logo.jpg" alt="">
            </div>
            <div class="item">
                <img class="partners-home" src="assets/img/visi/avotek_logo.jpg" alt="">
            </div>
            <div class="item">
                <img class="partners-home" src="assets/img/visi/avotek_logo.jpg" alt="">
            </div>
            <div class="item">
                <img class="partners-home" src="assets/img/visi/avotek_logo.jpg" alt="">
            </div>
            <div class="item">
                <img class="partners-home" src="assets/img/visi/avotek_logo.jpg" alt="">
            </div>
        </div>

JavaScript

$('.owl-carousel').owlCarousel({
                stagePadding: 50,
                loop: false,
                margin: 10,
                nav: true,
                navContainer: '.custom-nav',
                responsive:{
                    0:{
                        items: 1
                    },
                    600:{
                        items: 3
                    },
                    1000:{
                        items: 5
                    }
                }
            });