Scale Custom Animation With Owl Carousel 2

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 animati

Solution 1:

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;
}

.heroBannerContentp {
    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);
    }
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="crossorigin="anonymous"
/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="crossorigin="anonymous"
/><divclass="slide-progress-main"><divclass="slide-progress"></div></div><divclass="owl-carousel owl-theme hero-carousel"><divclass="item"><divclass="heroBanner heroBannerImg1 heroMobileBannerImg1"></div><divclass="heroBannerContent"><divclass="heroContent-inner"><p>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</p><divclass="mt-4"><aclass="button theme-button bg-black"href="about-us">About us</a></div></div></div></div><divclass="item"><divclass="heroBanner heroBannerImg2 heroMobileBannerImg2"></div><divclass="heroBannerContent"><divclass="heroContent-inner"><p>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</p><divclass="mt-4"><aclass="button theme-button bg-black"href="shop">Our Products</a></div></div></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="crossorigin="anonymous"></script>