Skip to content

Instantly share code, notes, and snippets.

@Uranbold
Forked from AminulBD/swiperinit.html
Created November 8, 2017 05:27
Show Gist options
  • Save Uranbold/5d075917d132cacf47aef0fbddda9d8e to your computer and use it in GitHub Desktop.
Save Uranbold/5d075917d132cacf47aef0fbddda9d8e to your computer and use it in GitHub Desktop.
Swiper Initialization with data attribute and Animate.css integrate
<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 -->
$('[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);
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment