Owl Carousel 2

How to add Owl Carousel 2 in your website

by Vikash Pareek

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">
 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="outer-slider">
   <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>
</div>
<a href="https://webtutorialhindi.com/how-to-use-owl-carousel-in-html-in-hindi-2021-complete-guide/">Visit</a>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: sans-sarif;
}
.outer-slider{
  max-width: 80%;
  margin: auto;
  margin-top: 50px;
}
.outer-slider .item{
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 1px #ccc;
  height: 100px;
  margin: 10px;
}
a{
  background: #ccc;
  height: 40px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  line-height: normal;
  margin-top: 40px;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  font-family: sans-sarif;
  border-radius: 10px;
  box-shadow: 0px 10px 10px 1px #a69e9e;
}

JavaScript

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