Question

我在这里的页面中间大约有一个猫头鹰轮播：https://www.lakeshoresup.com/product/pathfinder/

我想减慢淡入淡出动画的速度。我已经在猫头鹰jQuery中尝试了SlideSpeed和PaginationSpeed，但没有用：

<script>
    jQuery(window).on("load", function(){
      jQuery('.carousel-wrapper .owl-carousel').owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: <?php if(!$autotimer) {echo 3000;} else {echo $autotimer;} ?>,
        nav: true,
        loop: true,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        slideSpeed: 3000,
        paginationSpeed: 3000,
        navText: ['<span>prev</span>', '<span>next</span>']
      });
    });

我还在CSS中尝试了动画持续时间：

.owl-caraousel .animated { 
  animation-duration: 3000ms !important;
 }

有关如何降低此动画速度的任何想法。我们使用的淡入和淡出看起来像这样：

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

Answer 1

在JavaScript中使用smartSpeed:1500

在这里看到 https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

Answer 2

您可以添加动画持续时间：[number] s；更改为淡入淡出的持续时间。

猫头鹰轮播动画速度

2 个答案: