Media gallery

<div class="container">
            <div id="gallery" class="owl-carousel mt-5">
                    <div class="item"> <img src="https://tolmatol.com/uploads-images/media-gallery/owl-gallery-1.jpg" alt=""/> </div>
          <div class="item"> <img src="https://tolmatol.com/uploads-images/media-gallery/owl-gallery-2.jpg" alt=""/> </div>
          <div class="item"> <img src="https://tolmatol.com/uploads-images/media-gallery/owl-gallery-3.jpg" alt=""/> </div>
          <div class="item"> <img src="https://tolmatol.com/uploads-images/media-gallery/owl-gallery-4.jpg" alt=""/> </div>
          <div class="item"> <img src="https://tolmatol.com/uploads-images/media-gallery/owl-gallery-5.jpg" alt=""/> </div>
                     </div>
    </div>

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
    <style>
    
#gallery {
  background: #000000 none repeat scroll 0 0;
}
#gallery .owl-item {
  opacity: 0.2;
  cursor:pointer;
  transition-duration:0.8s;
}
#gallery .owl-item img {
  width: 100%;
}
#gallery .owl-item:hover {
  opacity: 1;
}
.owl-buttons {
  color: #de2f2f;
  font-size: 30px;
  height: 1px;
  left: -60px;
  overflow: visible;
  position: absolute;
  right: -60px;
  text-align: center;
  top: 46%;
}
.owl-prev {
  border: 2px solid #de302f;
  float: left;
  height: 47px;
  width: 47px;
}
.owl-next {
  border: 2px solid #de302f;
  float: right;
  height: 47px;
  width: 47px;
}
.owl-pagination {
  display:block
}
.owl-pagination {
  width:100%;
  display:block;
  margin:auto;
  text-align:center
}
.owl-pagination:after {
  content:"";
  clear:both;
  display:block
}
.owl-pagination .owl-page {
  height:10px;
  width:10px;
  background:#d7d6d6;
  border-radius:50%;
  display:inline-block;
  margin:25px 5px 0px;
}
.owl-pagination .owl-page.active {
  height:16px;
  width:16px;
  border-radius:50%;
  background:#de302f;
  position:relative;
  top:2px;
}
#gallery .owl-pagination {
  display: none;
}
#gallery .owl-item.active {
  opacity:1;
}
    </style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

      <script>
           var carousel = $("#gallery");
   carousel.owlCarousel({
   items : 3,
   loop: true,
   lazyLoad : true,
   autoPlay  : 3000,
   navigation : true,
      itemsCustom : [
      [0, 1],
      [450, 1],
      [600, 1],
      [700, 3],
      [1000, 3],
      [1200, 3],
      [1400, 3],
      [1600, 3]
      ],
     navigationText: [
    "<i class='fa fa-angle-left'></i>",
    "<i class='fa fa-angle-right'></i>"
    ],
   afterAction: function(el){
   this
   .$owlItems
   .removeClass('active')
   this
   .$owlItems
   .eq(this.currentItem + 1)
   .addClass('active')    
  } 
  });
 
      </script>