使用 Owl 轮播 2 缩放自定义动画

Question

我正在使用 Owl Carousel 2。我在图像中添加了一些比例动画。

我有两个问题

我不想从右向左滑动滑块。
如何重新启动动画？我的意思是，如果我刷新页面，那么动画将同时处理这两个图像，但我的幻灯片会循环播放。我得重新开始动画了。

$('.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)
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

<link rel="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"
/>
<div class="slide-progress-main">
  <div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
  <div class="item">
    <div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
    <div class="heroBannerContent">
      <div class="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>
        <div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
    <div class="heroBannerContent">
      <div class="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>
        <div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

Answer 1

为了在使用 transform: scale() 时正确更改动画，请为 .owl-carousel.owl-drag .owl-item 选择器添加 overflow: hidden。为此，请将其添加到您的自定义 css。像那样：

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

1 - 我不想从右向左滑动滑块:

为防止手动更改幻灯片，请将这些参数添加到滑块初始化中：

touchDrag: false,
mouseDrag: false,

2 - 如何重新开始动画？我的意思是，如果我刷新页面，那么动画将同时处理这两个图像，但我的幻灯片会循环播放。我必须重新启动动画:

您的滑块具有 scale() 到 @keyframes 的效果。但是随着 每张下一张幻灯片，图像变得越来越大。而且也不好看

为了避免这个问题，我修改了您的 jquery 代码，在切换到下一张幻灯片时重置动画。像那样：

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

但同时，在过渡动画完成后，我们return默认值animation由事件requestAnimationFrame规则。像那样：

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

下面是一个片段：

$(".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);
    }
}

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
    integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
    crossorigin="anonymous"
/>

<link
    rel="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"
/>
<div class="slide-progress-main">
    <div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
    <div class="item">
        <div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
        <div class="heroBannerContent">
            <div class="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>
                <div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
        <div class="heroBannerContent">
            <div class="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>
                <div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

使用 Owl 轮播 2 缩放自定义动画

Scale Custom animation with Owl Carousel 2

javascript

html

jquery

css

owl-carousel