Swiper Initialization with data attribute and Animate.css integrate

swiperinit.html

<div id="content-carousel" class="content-carousel-widget" data-carousel="swiper">
  <!--
  You can use: data-items="5" for total items display in single page
  data-autoplay="true" or "false" for autoplay.
  data-loop="true" or "false" for looping the carousel
  data-effect="fade" or "cube" for slide changing effects
  data-direction="horizontal" or "vertical" for sliding direction
  data-initlal="3" for for first active slide
  data-center="true" or "false" for centerize slider
  -->
<!--Carousel Next Prev Button-->
	<div class="controls">
		<a id="content-carousel-control-prev-unq-1" data-swiper="prev">
			<i class="fa fa-angle-left"></i>
		</a>
		<a id="content-carousel-control-next-unq-1" data-swiper="next">
			<i class="fa fa-angle-right"></i>
		</a>
	</div><!-- /.controls -->
	
	<!--Slider Bullet Pagination-->
	<div id="content-slider-pagination-unq-1" class="slider-pagination" data-swiper="pagination">
	</div><!-- /.slider-pagination -->

	<div id="content-carousel-container-unq-1" class="swiper-container" data-swiper="container">
		<div class="swiper-wrapper content-items">
			
			<div class="swiper-slide item">

				<div class="slide-image">
					<img src="images/content-carousel/image-01.jpg" alt="Content Carousel">
				</div><!-- /.slide-image -->

				<div class="content">
					<h2 class="title" data-animate="fadeInUp" data-delay="0.2s><a href="#">Holisticl coordinat cross media best practices.</a></h2>

					<div class="meta" data-animate="fadeInUp" data-delay="0.5s>
						<span>Posted by </span>
						<strong>Lionel Rasel</strong>
						<span> - </span>
						<span>Sep 16, 2015</span>
					</div>
				</div><!-- /.content -->
			</div><!-- /.item -->

			<div class="swiper-slide item">

				<div class="slide-image">
					<img src="images/content-carousel/image-01.jpg" alt="Content Carousel">
				</div><!-- /.slide-image -->

				<div class="content">
					<h2 class="title" data-animate="fadeInUp" data-delay="0.2s><a href="#">Holisticl coordinat cross media best practices.</a></h2>

					<div class="meta" data-animate="fadeInUp" data-delay="0.5s>
						<span>Posted by </span>
						<strong>Lionel Rasel</strong>
						<span> - </span>
						<span>Sep 16, 2015</span>
					</div>
				</div><!-- /.content -->
			</div><!-- /.item -->

		</div><!-- /.swiper-wrapper -->
	</div><!-- /.swiper-container -->
</div><!-- /#content-carousel -->

swiperinit.js

$('[data-carousel="swiper"]').each( function() {

	var container		= $(this).find('[data-swiper="container"]').attr('id');
	var pagination		= $(this).find('[data-swiper="pagination"]').attr('id');
	var prev		= $(this).find('[data-swiper="prev"]').attr('id');
	var next		= $(this).find('[data-swiper="next"]').attr('id');
	var items		= $(this).data('items');
	var autoplay		= $(this).data('autoplay');
	var iSlide		= $(this).data('initial');
	var loop		= $(this).data('loop');
	var center		= $(this).data('center');
	var effect		= $(this).data('effect');
	var direction		= $(this).data('direction');

	// Configuration
	var conf 	= {};

	if ( items ) {
		conf.slidesPerView = items
	};
	if ( autoplay ) {
		conf.autoplay = autoplay
	};
	if ( iSlide ) {
		conf.initialSlide = iSlide
	};
	if ( center ) {
		conf.centeredSlides = center
	};
	if ( loop ) {
		conf.loop = loop
	};
	if ( effect ) {
		conf.effect = effect
	};
	if ( direction ) {
		conf.direction = direction
	};
	if ( prev ) {
		conf.prevButton = '#' + prev
	};
	if ( next ) {
		conf.nextButton = '#' + next
	};
	if ( pagination ) {
		conf.pagination = '#' + pagination,
		conf.paginationClickable = true
	};

	// Animate Function
	function animated_swiper(selector, init) {
		var animated = function animated() {
			$(selector + ' [data-animate]').each(function(){
				var anim = $(this).data('animate');
				var delay = $(this).data('delay');
				var duration = $(this).data('duration');

				$(this).removeClass('anim' + anim)
				.addClass(anim + ' animated')
				.css({
					webkitAnimationDelay: delay,
					animationDelay: delay,
					webkitAnimationDuration: duration,
					animationDuration: duration
				})
				.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
					$(this).removeClass(anim + ' animated');
				});
			});
		};
		animated();
		// Make animated when slide change
		init.on('SlideChangeStart', function() {
			$(initID + ' [data-animate]').removeClass('animated');
		});
		init.on('SlideChangeEnd', animated);
	};

	// Initialization
	if (container) {
		var initID = '#' + container;
		var init = new Swiper( initID, conf);
		animated_swiper(initID, init);
	};
});