Using Swiper callback and Jquery to animate elements within Slideshows
Question
I recently picked up Swiper.js. I decided to make a slideshow. These work great. Now I wanted to animate elements within every slide separately, I figured the best way of doing so is using callback that has been provided by Swiper.js.
The very first slide works well, but upon going to the next slider (or returning to the very first slider), the animation seems to glitch. It is as if the image is first displayed in it's animated-state and thereafter animated again.
I made a code snippet to demonstrate the issue:
html, body { position: relative; height: 100%; } body { background: url(../../img/BannerEmpty.png); background-repeat: no-repeat; background-size: cover; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; text-align:center; } p { font-family: 'Architects Daughter', cursive; font-size: 40px; justify-content: flex-start; color: #3C3C3B; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; margin:auto; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #swipeLeft { margin: 0 20px 0 0 } #swipeRight { margin: 0 0 0 20px }
<link href="http://brickhunters.ddns.net/swiperslider/dist/css/swiper.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8"> <title>Test animations in Swiper</title> <link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Archivo+Black" rel="stylesheet"> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p id="swipeLeft">Slide from left!</p> <p id="swipeRight">Slide from right!</p> </div> <div class="swiper-slide"> <p id="swipeLeft">Why wont you work!</p> <p id="swipeRight">Argh #$!?%#@&=</p> </div> <div class="swiper-slide"> <img width="250px"id="swipeLeft" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> <img width="250px" id="swipeRight" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> </div> <!-- Swiper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://brickhunters.ddns.net/swiperslider/dist/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 3000, autoplayDisableOnInteraction: false, loop: true, onSlideChangeStart: function (s) { var currentSlide = $(s.slides[s.activeIndex]); currentSlide.find('#swipeLeft').removeClass('animated slideInLeft'); currentSlide.find('#swipeRight').removeClass('animated slideInRight'); }, onSlideChangeEnd: function (s) { var currentSlide = $(s.slides[s.activeIndex]); currentSlide.find('#swipeLeft').addClass('animated slideInLeft'); currentSlide.find('#swipeRight').addClass('animated slideInRight'); } }); </script> </body> </html>
And also a pen: http://codepen.io/RexDesign/pen/NRgJWy
What does one need to do to do to achieve a smooth animation in this case?
Many thanks in advance.
1 answers
solution1
1 2017-04-22 15:34:51
adding animate class in html custom data attribute for example,
<p id="workStartPhrase" class="animated delay200ms fatten" data-animation="flipInY">Waarom zou ik?</p>
then adding swiper sliders options , as like as..
var animEndEv = 'webkitAnimationEnd animationend';
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 0,
autoplayDisableOnInteraction: false,
loop: true,
onSlideChangeStart: function(s) {
var currentSlide = $(s.slides[s.activeIndex]);
var elems = currentSlide.find(".animated")
elems.each(function() {
var $this = $(this);
var animationType = $this.data('animation');
$this.addClass(animationType, 100).on(animEndEv, function() {
$this.removeClass(animationType);
});
});
},
onSlideChangeEnd: function(s) {
var currentSlide = $(s.slides[s.activeIndex]);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.