Owl Carousal Add Class

Add class and use owl carousal slider

by Vikash Pareek

HTML

<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.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="container">
    <div class="outer-slider">
        <div class="inner-slider">
            <ul class="example-slider">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
            </ul>
        </div>
    </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: sans-serif;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.container .outer-slider .inner-slider ul li{
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: #ccc;
}
.outer-slider{
    width: 80%;
    float: left;
    margin: 40px 0px;
}

JavaScript

var slider = $('.example-slider');
  $(slider).addClass('owl-carousel owl-theme');
  $(slider).owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
})