Swiper.js with Wow.js Animation

Combining the Swiper.js with wow.js animated content

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
 <div class="my1">
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <p>ananimate</p>
          <div class="animate">
            <div class="text"></div>
                </div>
</div>

 <div class="my2">
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
          <p>not animate</p>
           <div class="text_not_animate"></div>
</div>

CSS

html,body{position:relative;height:100%;}body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}.swiper-container{width:100%;height:100%;}.swiper-slide{background-position:center;background-size:cover;}
.container { margin:40px; padding:40px ; display:block ; background-color: rgba(255,255,255, 0.7);width:300px;  }
.title { font-size:30px;}
.text { font-size:14px; }

JavaScript

if(!$('p').hasClass('text')){
    $('p').addClass('wow fadeInUp');}

$(document).ready(function() {
		var c = 1;

    $('p').each(function(idx, elem) {
       $(elem).attr('data-wow-delay', c + 's');
       c += 0.5;
    });

		var swiper = new Swiper('.swiper-container', {
			pagination: true,  
			effect: 'fade',
			loop: true, 
			autoplay: 7000,
        	autoplayDisableOnInteraction: false,
			onSlideChangeStart: function(s) {  
            var x = s.activeIndex;
 
			}
		});
		
	var wow = new WOW(
	  {
		boxClass:     'wow',      // animated element css class (default is wow)
		animateClass: 'animated', // animation css class (default is animated)
		offset:       0,          // distance to the element when triggering the animation (default is 0)
		mobile:       true,       // trigger animations on mobile devices (default is true)
		live:         true,       // act on asynchronously loaded content (default is true)
		callback:     function(box) {
		  // the callback is fired every time an animation is started
		  // the argument that is passed in is the DOM node being animated
		}
	  }
	);
	
	wow.init();
	
	});