I'm a newbie.
I found sliceboxjs and wowjs on the internet.
I'm trying to create a slideshow that combines sliceboxjs and wowjs.
But when I click the Next button for the third time, slicebox and wow only work with the first run. Since then, wowjs do not work anymore.
Can someone fix the code that helps me?
Thanks so much!
<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>
// Slicebox 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();
My code: slicebox-and-wowjs
