"New Zoom Carousel / Slider bootstrap with animation"
Bootstrap 3.3.0 Snippet by Mohan.P

<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">Get start your next awesome project</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">Get start your next awesome project</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=""> <div class="carousel-caption animated slideInLeft"> <h1 data-animation="animated zoomInLeft" class="cap-txt">We are innovative</h1> <p data-animation="animated bounceInDown">Get start your next awesome project</p> <button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#sg-carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#sg-carousel" data-slide="next">›</a> </div> </div> </div>
<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; } .carousel-control { bottom: 0; color: #fff; font-size: 20px; left: 0; opacity: 0; position: absolute; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); top: 0; width: auto; transition: all 0.8s ease 0s; } .carousel-inner { box-shadow: 2px 6px 21px; } .fa-angle-right, .fa-angle-left { font-size: 80px; } #sg-carousel:hover .carousel-control.left { left: 38px; transition: all .2s ease 0; } #sg-carousel:hover .carousel-control.right { right: 38px; transition: all .2s ease 0; } #sg-carousel:hover .carousel-control.left, #sg-carousel:hover .carousel-control.right { opacity: 1; } .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img { display: block; height: auto; max-width: 100%; width: 100%; } .item.active img { transition: transform 5000ms linear 0s; transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; font-size: 80px; } .carousel-caption { left: 60%; padding-bottom: 5%; right: 0; text-align: left; } .carousel-caption h1 { font-family: raavi; font-size: 60px; font-weight: 600; line-height: 18px; } .carousel-caption > p { font-size: 30px; color: #fff; } .carousel-caption > a { text-transform: uppercase; color: #fff; background: #041132; padding: 6px 12px; } .button--tamaya { border: 2px solid #40a304 !important; border-radius: 5px; color: #7986cb; min-width: 180px; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; } .button--border-thick { border: 3px solid; } .button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: inherit; display: block; float: left; max-width: 250px; min-width: 199px; padding: 1em 7em; position: relative; vertical-align: middle; z-index: 1; } .button--tamaya::before { padding-top: 1em; top: 0; } .button--tamaya::before, .button--tamaya::after { background: #40a304; color: #fff; content: attr(data-text); height: 50%; left: 0; overflow: hidden; position: absolute; transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s; width: 100%; } .button--tamaya::after { bottom: 0; line-height: 0; } .button--tamaya:hover::before { transform: translate3d(0px, -100%, 0px); } .button--tamaya:hover::after { transform: translate3d(0px, 100%, 0px); color: #40a304; } .button--tamaya:hover { color: #40a304; font-weight: 600; } .carousel-indicators li { background-color: #b3b5b9; border-radius: 10px; cursor: pointer; display: inline-block; height: 12px; margin: 1px; text-indent: -999px; width: 12px; border: 0; } .carousel-indicators .active { background-color: #041132; height: 12px; margin: 0; width: 12px; border: 0; } #sg-carousel h1 { animation-delay: 1s; margin-bottom:25px; } #sg-carousel p { animation-delay: 2s; } #sg-carousel button { animation-delay: 3s; margin-top:25px; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
(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); }); })(jQuery);

Related: See More


Questions / Comments: