Owl Carousel v2.3.4

Owl Carousel v2.3.4 html

<!-- Html 
 <!-- Start Slider Section Area-->
    <div id="home" class="slider_wrapper">
      <div class="homeslider owl-carousel">
        <!-- Start single slide-->
        <div class="singleSlide">
          <div class="singleSlideCell">
            <div class="itemBg">
              <img src="images/slide-1.jpg" class="img-responsive" alt="">
            </div>
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-md-8">
                  <div class="slide_capton">
                    <h1> Welcome to Biz-Mega business</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro vel quae commodi illo cum perferendis fugiat sit repellendus laboriosam, ducimus?</p>
                    <a href="#" class="btn btn-default bg">Read More</a>
                    <a href="#" class="btn btn-default">Lear More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--End single slide-->
        <div class="singleSlide">
          <div class="singleSlideCell">
            <div class="itemBg">
              <img src="images/slide-2.jpg" class="img-responsive" alt="">
            </div>
            <div class="container">
              <div class="row justify-content-end">
                <div class="col-md-8">
                  <div class="slide_capton">
                    <h1> Welcome to Biz-Mega business</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro vel quae commodi illo cum perferendis fugiat sit repellendus laboriosam, ducimus?</p>
                    <a href="#" class="btn btn-default bg">Read More</a>
                    <a href="#" class="btn btn-default">Lear More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Start single slide-->
        <div class="singleSlide">
          <div class="singleSlideCell">
            <div class="itemBg">
              <img src="images/slide-3.jpg" class="img-responsive" alt="">
            </div>
            <div class="container">
              <div class="row">
                <div class="col-md-8">
                  <div class="slide_capton">
                    <h1> Welcome to Biz-Mega business</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro vel quae commodi illo cum perferendis fugiat sit repellendus laboriosam, ducimus?</p>
                    <a href="#" class="btn btn-default bg">Read More</a>
                    <a href="#" class="btn btn-default">Lear More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--End single slide-->
      </div>
    </div>
    <!--End slider Section Area-->
    
    CSS===
    /*****************************
04. Slider CSS
*****************************/

.slider_wrapper {
  background: #3c3950
}

.singleSlide {
  background: #ddd;
  display: table;
  height: 678px;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.singleSlide::before {
  content: '';
  width: 100%;
  height: 100%;
  opacity: .7;
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  background: #000;
}

.singleSlideCell {
  display: table-cell;
  vertical-align: middle
}

.slide_capton {
  margin-top: 30px
}

.singleSlide h1 {
  font-size: 40px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  color: #fff
}

.singleSlide p {
  color: #fff
}

.owl-prev {
  height: 36px;
  margin-top: -30px;
  position: absolute;
  top: 50%;
  width: 44px;
  background-size: cover;
  transition: .3s;
  font-size: 10px
}

.owl-next {
  height: 36px;
  margin-top: -30px;
  position: absolute;
  top: 50%;
  width: 44px;
  right: 0;
  background-size: cover;
  transition: .3s
}

.owl-prev i,
.owl-next i {
  font-size: 15px;
  color: #fff
}

.owl-prev:focus,
.owl-prev:active,
.owl-prev:visited,
.owl-next:hover,
.owl-prev:focus,
.owl-prev:active,
.owl-prev:visited,
.owl-prev:hover {
  width: 50px;
  border: 0
}

.homeslider .owl-dots {
  display: none
}

.itemBg {
  display: none
}

.homeslider .singleSlide h1.animated {
  animation-duration: 1.3s ease-in-out;
  transform: translate(-50%, -50%)
}

.homeslider .singleSlide p.animated {
  animation-duration: 1.4s ease-in-out
}

.homeslider .singleSlide .btn.animated {
  animation-duration: 1.5s ease-in-out
}

    
    js
    /*=================
Slider js
===================*/
jQuery('.homeslider').owlCarousel({
  loop: true,
  nav: true,
  autoplay: true,
  autoplayHoverPause: true,
  autoplaySpeed: 300,
  animateOut: 'fadeOut',
  animateIn: 'fadepIn',
  navText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
  responsive: {
    0: {
    items: 1
    },
    600: {
    items: 1
    },
    1000: {
    items: 1
    }
  }
});
  var itemBg = $('.itemBg');
    $('.homeslider .singleSlide').each(function() {
      var itmeImg = $(this).find('.itemBg img').attr('src');
      $(this).css({
        background: 'url(' + itmeImg + ')'
      }); 
    });
  function mySlideFunc() {
    $('.owl-item').removeClass('next prev');
      var currenSlide = $('.homeslider .owl-item.active');
      currenSlide.next('.owl-item').addClass('next');
      currenSlide.prev('.owl-item').addClass('prev');
      var nextSlideImg = $('.owl-item.next').find('.itemBg img').attr('src');
      var prevSlideImg = $('.owl-item.prev').find('.itemBg img').attr('src');
      $('.owl-nav .owl-prev').css({
        background: 'url(' + prevSlideImg + ')'
      })
      $('.owl-nav .owl-next').css({
        background: 'url(' + nextSlideImg + ')'
      })
    };
    mySlideFunc();
    $(".homeslider").on('translated.owl.carousel', function() {
      mySlideFunc();
    });
    $(".homeslider").on('translate.owl.carousel', function() {
      $('.singleSlide h1').removeClass('fadeInUp animated').hide();
      $('.singleSlide p').removeClass('fadeInUp animated').hide();
      $('.singleSlide .btn').removeClass('fadeInUp animated').hide();
    });
    $(".homeslider").on('translated.owl.carousel', function() {
      $('.owl-item.active .singleSlide h1').addClass('bounceIn animated').show();
      $('.owl-item.active .singleSlide p').addClass('bounceIn animated').show();
      $('.owl-item.active .singleSlide .btn').addClass('bounceIn animated').show();
    });