jquery - 结合 Wow.js 和 Slicebox.js 来创建动画滑块
问题描述
我是新手。
我在网上找到了 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
解决方案
使用类“动画”代替哇。
<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="">
推荐阅读
- php - php mysqli 唯一的第一个字符没有正确出现
- wpf - ContextMenu - 使用 ItemContainerStyle 时的奇怪行为
- bash - 用 Bash 比较文件
- reactjs - 反应保存 api 请求
- python - 如何将pyspark聚合函数结果输出为字符串?
- c++ - 当我在我的姓名输入部分输入超过 1 个单词时,代码会无限次保存数据
- reactjs - 有没有更好的方法可以根据数据类型从同一组件中的 API 获取不同的数据?
- visual-studio - Visual Studio 不显示文件夹和类
- javascript - 如何阻止可拖动元素从画布中拖动
- rust - Rust - 返回对结构拥有的 Vec 中元素的可变引用