CODEWITHSUNDEEP
javascriptjquerycssswiper.jsanimate.css
Djov
Djov

Reputation: 664

Using Swiper callback and Jquery to animate elements within Slideshows

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.

Upvotes: 0

Views: 5916

Answers (1)

Rubel Hossain
Rubel Hossain

Reputation: 2733

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]);

    }
});

Upvotes: 2

Related Questions