Skip to content

Instantly share code, notes, and snippets.

@AminulBD
Last active September 4, 2021 08:53
Show Gist options
  • Save AminulBD/60011db4077b47c487d6 to your computer and use it in GitHub Desktop.
Save AminulBD/60011db4077b47c487d6 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 containe = $(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);
};
});
@Siiimple
Copy link

Siiimple commented Jun 3, 2016

Tried to give this a go, but wasn't able to get it to work. I've got Swiper 3.3.1 enqueued. Must be missing something though. Thanks for your script.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment