结合 Wow.js 和 Slicebox.js 来创建动画幻灯片答案

【问题标题】：Combines Wow.js and Slicebox.js to creat animating sliders结合 Wow.js 和 Slicebox.js 来创建动画幻灯片
【发布时间】：2019-07-29 12:11:33
【问题描述】：

我是新手。

我在网上找到了 sliceboxjs 和 wowjs。

我正在尝试创建一个结合了 sliceboxjs 和 wowjs 的幻灯片。

但是当我第三次单击 Next 按钮时， slicebox 和 wow 仅适用于第一次运行。从此，wowjs 就不再工作了。

有人可以修复对我有帮助的代码吗？

非常感谢！

<div class="container">
  <div class="wrapper">
    <!--  sliceboxjs   -->
    <ul id="sb-slider" class="sb-slider">
      <li>
        <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="https://tympanus.net/Development/Slicebox/images/1.jpg" alt="image1"/></a>
        <div class="sb-description">
          <h3>Creative Lifesaver</h3>
        </div>
        <!--  wowjs   -->
        <img class="icon-animation icon-animation-1 wow bounceInLeft" data-wow-delay="1s" src="http://thietkewebnhanh247.com/wp-content/uploads/2016/11/banner_4_-21.png" alt="">
        <img class="icon-animation icon-animation-2 wow bounceInRight" data-wow-delay="1s" src="http://thietkewebnhanh247.com/wp-content/uploads/2016/11/banner_4_-31.png" alt="">
      </li>

      <li>
        <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="https://tympanus.net/Development/Slicebox/images/2.jpg" alt="image2"/></a>
        <div class="sb-description">
          <h3>Honest Entertainer</h3>
        </div>
        <!--  wowjs   -->
        <img class="icon-animation icon-animation-1 wow bounceInLeft" data-wow-delay="1s" src="http://thietkewebnhanh247.com/wp-content/uploads/2016/11/banner_4_-21.png" alt="">
        <img class="icon-animation icon-animation-2 wow bounceInRight" data-wow-delay="1s" src="http://thietkewebnhanh247.com/wp-content/uploads/2016/11/banner_4_-31.png" alt="">
      </li>
    </ul>

    <div id="shadow" class="shadow"></div>

    <div id="nav-arrows" class="nav-arrows">
      <a href="#">Next</a>
      <a href="#">Previous</a>
    </div>

  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

// 切片盒js

$(function() {

  var Page = (function() {

    var $navArrows = $( '#nav-arrows' ).hide(),
        $shadow = $( '#shadow' ).hide(),
        slicebox = $( '#sb-slider' ).slicebox( {
          onReady : function() {

            $navArrows.show();
            $shadow.show();

          },
          orientation : 'r',
          cuboidsRandom : true,
          disperseFactor : 30
        } ),

        init = function() {

          initEvents();

        },
        initEvents = function() {

          // add navigation events
          $navArrows.children( ':first' ).on( 'click', function() {

            slicebox.next();
            return false;

          } );

          $navArrows.children( ':last' ).on( 'click', function() {

            slicebox.previous();
            return false;

          } );

        };

    return { init : init };

  })();

  Page.init();

});
//wowjs
new WOW().init();

我的代码：slicebox-and-wowjs

【问题讨论】：

标签： jquery html css wow.js

【解决方案1】：

使用类“动画”代替哇。

<img class="icon-animation icon-animation-1 animated bounceInLeft" data-wow-delay="1s" src="http://thietkewebnhanh247.com/wp-content/uploads/2016/11/banner_4_-21.png" alt="">

【讨论】：