Scale Custom animation with Owl Carousel 2

Question

I am using Owl Carousel 2. I have added some scale animation to the images.

I am getting two issues

I don't want to slide the slider from right to left.
How to restart the animation again? I mean If I refresh the page then animation is working with both images but my slide is on loop. I have to restart the animation again.

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

.heroBannerContent {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  width: 400px;
}

.heroBannerContent p {
  color: #fff;
  font-size: 20px;
}

.heroBanner {
  height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.heroBannerImg1 {
  background-image: url('https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg');
}

.heroBannerImg2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg');
}

.heroBanner {
  animation: 50s ease 0s normal none infinite running zoomEffect;
  -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
  -o-animation: 50s ease 0s normal none infinite running zoomEffect;
  -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
  from {
    transform: scale(1, 1)
  }
  to {
    transform: scale(2, 2)
  }
}





  


  
    
    
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        About us
      
    
  
  
    
    
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        Our Products

user_13573444 · Answer

For correct animation change when working with transform: scale() add overflow: hidden for .owl-carousel.owl-drag .owl-item selector. To do this, add this to your custom css. Like that:

.owl-carousel .owl-item {
    overflow: hidden;
}

1 - I don't want to slide the slider from right to left:

To prevent manual slide changes, add these parameters to the slider initialization:

touchDrag: false,
mouseDrag: false,

2 - How to restart the animation again? I mean If I refresh the page then animation is working with both images but my slide is on loop. I have to restart the animation again:

Your slider has an effect of scale() working through @keyframes. But with each next slide, the images get bigger and bigger. And it doesn't look good.

And to avoid this problem, I modified your jquery code, which resets the animation upon the event of a transition to the next slide. Like that:

 $(".heroBanner").css("animation", "none");

But at the same time, after the transition animation completes, we return the default value animation rule by event requestAnimationFrame. Like that:

window.requestAnimationFrame(function () {
    $(".heroBanner").css("animation", "");
});

Below is a snippet:

$(".hero-carousel").owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    dots: true,
    touchDrag: false,
    mouseDrag: false,
    autoplay: true,
    responsiveClass: true,
    animateIn: 'fadeIn',
    animateOut: 'fadeOut',
    responsive: {
        0: {
            items: 1,
        },
        600: {
            items: 1,
        },
        1000: {
            items: 1,
        },
    },
});

$(".hero-carousel").on("changed.owl.carousel", function () {
    $(".heroBanner").css("animation", "none");
    window.requestAnimationFrame(function () {
        $(".heroBanner").css("animation", "");
    });
});

.owl-carousel .owl-item {
    overflow: hidden;
}

.heroBannerContent {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    width: 400px;
}

.heroBannerContent p {
    color: #fff;
    font-size: 20px;
}

.heroBanner {
    height: 500px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.heroBannerImg1 {
    background-image: url("https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg");
}

.heroBannerImg2 {
    background-image: url("https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg");
}

.heroBanner {
    animation: 50s ease 0s normal none infinite running zoomEffect;
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
    -o-animation: 50s ease 0s normal none infinite running zoomEffect;
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(2, 2);
    }
}





    


    
        
        
            
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                About us
            
        
    
    
        
        
            
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                Our Products

Scale Custom animation with Owl Carousel 2

1 Answers