为使用 slick.js 构建的幻灯片添加动画答案

【问题标题】：Adding animation to slides built with slick.js为使用 slick.js 构建的幻灯片添加动画
【发布时间】：2023-03-21 15:38:01
【问题描述】：

我正在尝试为使用 slick.js 构建的幻灯片上的文本添加动画。我试图使用这篇文章中的一些代码（Slick Carousel target active slide to add and remove animation classes），但它没有添加任何类。

我觉得我的回调函数有问题，因为我没有看到这些类被添加。有人有想法吗？

 <script>
    $(document).ready(function(){
        $('.featured-wrap').slick({
            infinite: true,
            speed: 400,
            autoplaySpeed: 6000,
            autoplay: true,
            fade: true,
            slide: 'div',
            cssEase: 'linear',
            dots: true,
            arrows: true,
            pauseOnHover: false,
            adaptiveHeight: true
        });
    });
</script>
<script>
    $(document).ready(function(){
        $('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
            $('.slick-active .display').removeClass('hidden');
            $('.slick-active .display').addClass('animated fadeInDown');
        });

        $('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.slick-active .display').removeClass('animated fadeInDown');
            $('.slick-active .display').addClass('hidden');
        });
    });
</script>

【问题讨论】：

我可以看看你的 HTML 吗？可能是您正在调用一个不存在的 DOM 元素。你在检查你的 ID (#) 和 class(.) 标识符吗？

标签： javascript jquery carousel slick.js

【解决方案1】：

html代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <script src="app2.js"></script>
    <style>
    body {
    background-color: lightblue;
   }
   #slickslide {
       height: 200px;
       background: lightgray;
     }
     #content {
         margin: auto;
         padding: 20px;
         width: 80%;
     }

    </style>
</head>
<body>
  <button onclick="myFunction()">Try it</button>
  <div id="demo"></div>
<div id=content>  
  <div id="slickslide" slick="">
    <div><h1>1</h1></div>
    <div><h1>2</h1></div>
    <div><h1>3</h1></div>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
  </div>
</div>
</body>
</html>

JavaScript 代码

function myFunction() {
  $(document).ready(function(){
      $('#slickslide').slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          slidesToScroll: 1
      });
  });
}

【讨论】：

我花了一段时间才让它工作。我建议使用其他滑块插件，这些插件很简单，而且不那么耗时