"New Zoom Carousel / Slider bootstrap with animation"
Bootstrap 3.3.0 Snippet by sangrai

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--New-Zoom-Crousal-by Sangrai-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all">
<div class="container-fluid">
<div class="row">
<div id="sg-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1" class=""></li>
<li data-target="#carousel" data-slide-to="2" class=""></li>
<li data-target="#carousel" data-slide-to="3" class=""></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner carousel-zoom">
<div class="item active"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818" alt="">
<div class="carousel-caption">
<h1 data-animation="animated zoomInLeft" class="cap-txt ">We are amazing</h1>
<p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p>
<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
</div>
</div>
<div class="item"><img class="img-responsive" src="https://images.pexels.com/photos/48726/pexels-photo-48726.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
<div class="carousel-caption">
<h1 data-animation="animated zoomInLeft" class="cap-txt">We are smart developers</h1>
<p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p>
<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
</div>
</div>
<div class="item"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327" alt="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
* CROUSAL-STARTS */
#sg-carousel {
position: relative;
height: 100vh;
}
#sg-carousel .carousel-inner .item {
height: 100vh;
}
.carousel-caption{top:50%;}
.carousel-caption h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
#sg-carousel .carousel-control.left {
top: 48%;
}
#sg-carousel .carousel-control.right {
top: 48%;
}
.uppr-txt {
text-transform: uppercase;
color: #fff;
font-size: 35px;
}
#sg-carousel .carousel-control.left,
#sg-carousel .carousel-control.right {
background-image: none;
background-repeat: no-repeat;
opacity: 0;
text-shadow: none;
transition: all 0.8s ease 0s;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#sg-carousel'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hello there

I like your example very much. congratulations.

but there seems to be a slight problem.

there is a gap between the indicator and the pictures when you open it from the phone. I could not solve it. If you help me, please. good work

martineden30 () - 6 years ago - Reply 0