0

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

1 に答える 1

-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
      });
  });
}
于 2015-05-04T23:55:42.367 に答える