title: Swiper slide - using animate.css to animate elements within slide
body: <p><strong>EDIT:</strong> I figured out what the problem is, when the slide is set to <code>loop: true</code>, it will show the effect that the element is sliding twice. How can I resolve this without turning loop to false?</p>
  
  <p>-- </p>
  
  <p>I'm using the swiper slider alongside animate.css to animate some elements inside a slide. I am trying to get a specific element to slide in from the right (slideInRight). </p>
  
  <p>For this, I initially set the <code>visibility</code> of the element to <code>hidden</code> and then add the animated class to the element and set the visibility to visible inside the <code>setTimeout</code> method. </p>
  
  <p>It works, however there'a a slight bug, the slide in effect looks like its going through 2 cycles. It should just seamlessly slide in from the right and fall into it's place. To see in action, run the code below:</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
  
    var swiper = document.querySelector('.swiper-container').swiper;
  
    setTimeout(function() {
      $('.slide-container').css({
        'visibility': 'visible',
        'opacity': '1'
      }).addClass('animated slideInRight animate-duration-100');
    }, 1000);
  
    setTimeout(function() {
      $('.sy-title').css({
        'visibility': 'visible'
      }).addClass('animated slideInRight');
    }, 1600);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #3E3E3E;
  }
  
  .swiper-container {
    max-width: 300px;
  }
  
  .slide-container {
    opacity: 0;
    transition: 2s ease-in-out;
    visibility: hidden;
  }
  
  .img-fluid {
    max-width: 100%;
  }
  
  span.sy-title {
    display: block;
    color: #fff;
    font-weight: bold;
    visibility: hidden;
    font-size: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.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;div class="swiper-container"&gt;
  
    &lt;div class="swiper-wrapper"&gt;
  
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slide-container"&gt;
          &lt;div class="img-container-1"&gt;
            &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide1"&gt;
          &lt;/div&gt;
          &lt;div class="sy-info"&gt;
            &lt;span class="sy-title"&gt;WATCH THIS TEXT ANIMATION&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="img-container-2"&gt;
            &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide1"&gt;
          &lt;/div&gt;
          &lt;div class="sy-availability"&gt;
            &lt;span class="sy-title"&gt;WATCH THIS TEXT ANIMATION&lt;/span&gt;
            &lt;div class="img-container-3"&gt;
              &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide1"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="swiper-slide"&gt;
        &lt;div class="slide-container"&gt;
          &lt;div class="img-container-1"&gt;
            &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide2"&gt;
          &lt;/div&gt;
          &lt;div class="sy-info"&gt;
            &lt;span class="sy-title"&gt;WATCH THIS TEXT ANIMATION&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="img-container-2"&gt;
            &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide2"&gt;
          &lt;/div&gt;
          &lt;div class="sy-availability"&gt;
            &lt;span class="sy-title"&gt;WATCH THIS TEXT ANIMATION&lt;/span&gt;
            &lt;div class="img-container-3"&gt;
              &lt;img class="img-fluid" src="http://placehold.it/500x300?text=slide2"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Add Pagination --&gt;
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>