将动画添加到使用slick.js构建的幻灯片中

时间：2022-11-03 20:16:30

I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.

我试图在使用slick.js构建的幻灯片上的文本中添加动画。我试图在这篇文章中使用一些代码(Slick Carousel目标活动幻灯片来添加和删除动画类),但它没有添加任何类。

I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?

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

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

1 个解决方案

#1

html code

<!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 code

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

#1

html code

<!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 code

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

相关文章