【问题标题】:Owl carousel fade not working with bootstrap 4猫头鹰旋转木马褪色不适用于引导程序 4
【发布时间】:2021-05-15 11:58:59
【问题描述】:

我有一个猫头鹰轮播滑块,我需要渐变效果。根据owl carousel doc,需要添加动画css库。所以我把它添加到我的网站上。但它根本不起作用。似乎都堆叠在每张幻灯片后面。

这是我的滑块选项

$('.home-slider-2').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});

所以我尝试了这种方式,

  • 移除 bootstrap 4 jQuery slim 并添加完整版。
  • 将 smartSpeed:450 调高

仍然没有任何运气。这是我的fiddle

有什么帮助吗?

【问题讨论】:

    标签: javascript html jquery css owl-carousel-2


    【解决方案1】:

    这里的问题是Owl carousel使用animate.css的版本3.x。在最新版本的animate.css (4.x) 中,我们需要将animate__animated 类添加到该元素,我们想要动画,而在3.x 版本中,我们需要将animated 类添加到元素。

    Owl carousel 用于自动添加animated 类,您只需指定所需的动画即可。

    现在,有两种方法可以做到:


    1. 要么将链接标签更改为:

      <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
      

      发件人:

      <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
      

    1. 或者根据新版本更改js中的类,像这样:

      $(".home-slider-2").owlCarousel({
         animateOut: "animate__animated animate__slideOutDown",
         animateIn: "animate__animated animate__flipInX",
         items: 1,
         smartSpeed: 450
      });
      

    在 Codepen 上进行检查:https://codepen.io/manaskhandelwal1/pen/ZEBBXPw


    注意

    animate.css 文件应位于Owl carousel 文件之上。


    你应该使用一些更好的库来这样做,因为即使OwlCarousel2 GitHub

    是的,这已经死了,你自己帮个忙,然后切换到tiny-slider

    【讨论】:

      【解决方案2】:

      要使用 Anime.css,您需要将以下类添加到元素“animate_animated animate__(这里是你的动画名称)”

      试试这样的

      animateOut: 'animate__animated animate__slideOutDown',
      animateIn: 'animate__animated animate__flipInX',
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-06-28
        • 1970-01-01
        • 2017-03-30
        • 1970-01-01
        • 2016-09-16
        • 2021-10-04
        • 1970-01-01
        相关资源
        最近更新 更多