title: Using Swiper callback and Jquery to animate elements within Slideshows
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>I made a code snippet to demonstrate the issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 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
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://brickhunters.ddns.net/swiperslider/dist/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Test animations in Swiper&lt;/title&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Archivo+Black" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Swiper --&gt;
          &lt;div class="swiper-container"&gt;
              &lt;div class="swiper-wrapper"&gt;
                  &lt;div class="swiper-slide"&gt;
                    &lt;p id="swipeLeft"&gt;Slide from left!&lt;/p&gt;
                    &lt;p id="swipeRight"&gt;Slide from right!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;
                    &lt;p id="swipeLeft"&gt;Why wont you work!&lt;/p&gt;
                    &lt;p id="swipeRight"&gt;Argh #$!?%#@&amp;=&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;
                  &lt;img width="250px"id="swipeLeft" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"&gt;&lt;/img&gt;
                  &lt;img width="250px" id="swipeRight" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"&gt;&lt;/img&gt;
                  &lt;/div&gt;
                    
                    
                  &lt;/div&gt;
              &lt;!-- Add Pagination --&gt;
              &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
              &lt;!-- Add Arrows --&gt;
              
          &lt;/div&gt;
      
          &lt;!-- Swiper JS --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://brickhunters.ddns.net/swiperslider/dist/js/swiper.min.js"&gt;&lt;/script&gt;
          &lt;!-- Initialize Swiper --&gt;
          &lt;script&gt;
              
          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');      
              }
          });
              
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And also a pen: <a href="http://codepen.io/RexDesign/pen/NRgJWy" rel="nofollow">http://codepen.io/RexDesign/pen/NRgJWy</a></p>
  
  <p>What does one need to do to do to achieve a smooth animation in this case?</p>
  
  <p>Many thanks in advance.</p>