"Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe"
Bootstrap 3.3.0 Snippet by Utsavi Shah

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Animated Vertical Carousel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <section class="slide-wrapper"> <div class="container"> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item item1 active"> <div class="fill" style=" background-color:#48c3af;"> <div class="inner-content"> <div class="carousel-img"> <img src="http://vocefalandoingles.com/wp-content/uploads/2016/09/sofa.png" alt="sofa" class="img img-responsive" /> </div> <div class="carousel-desc"> <h2>Modern Designer Sofa</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio. Sed auctor id purus nec tristique. Donec euismod, urna vel dapibus tristique, dolor arcu ultrices lectus, nec pulvinar est turpis sit amet felis. Duis interdum purus quam, vitae cursus erat ornare at. Donec congue mi a ipsum tincidunt, imperdiet vehicula odio rutrum. Nam porta vulputate magna, id pretium lectus iaculis eu. Ut ut viverra libero.</p> </div> </div> </div> </div> <div class="item item2"> <div class="fill" style="background-color:#b33f4a;"> <div class="inner-content"> <div class="carousel-img"> <img src="http://cdn.homedit.com/wp-content/uploads/2011/08/137CLUB2ST.png" alt="white-sofa" class="img img-responsive" /> </div> <div class="carousel-desc"> <h2>Vintage Style Sofa</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio. Sed auctor id purus nec tristique. Donec euismod, urna vel dapibus tristique, dolor arcu ultrices lectus, nec pulvinar est turpis sit amet felis. Duis interdum purus quam, vitae cursus erat ornare at. Donec congue mi a ipsum tincidunt, imperdiet vehicula odio rutrum. Nam porta vulputate magna, id pretium lectus iaculis eu. Ut ut viverra libero.</p> </div> </div> </div> </div> <div class="item item3"> <div class="fill" style="background-color:#7fc2f4;"> <div class="inner-content"> <div class="col-md-6"> <div class="carousel-img"> <img src="http://vocefalandoingles.com/wp-content/uploads/2016/09/sofa.png" alt="sofa" class="img img-responsive" /> </div> </div> <div class="col-md-6 text-left"> <div class="carousel-desc"> <h2>Stylish Sofa</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elit ipsum, scelerisque non semper eu, aliquet vel odio. Sed auctor id purus nec tristique. Donec euismod, urna vel dapibus tristique, dolor arcu ultrices lectus, nec pulvinar est turpis sit amet felis. Duis interdum purus quam, vitae cursus erat ornare at. Donec congue mi a ipsum tincidunt, imperdiet vehicula odio rutrum. Nam porta vulputate magna, id pretium lectus iaculis eu. Ut ut viverra libero.</p> </div> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html>
html, body{ width:100%; height:100%; background-color:#fff; font-family: 'Sansita', sans-serif; } .carousel-inner,.carousel,.item,.container,.fill { height:100%; width:100%; background-position:center center; background-size:cover; } .slide-wrapper{display:inline;} .slide-wrapper .container{padding:0px;} /*------------------------------ vertical bootstrap slider----------------------------*/ .carousel-inner> .item.next , .carousel-inner > .item.active.right{ transform: translateY(100%); -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); top: 0;left:0;} .carousel-inner > .item.prev ,.carousel-inner > .item.active.left{ transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); top: 0; left:0;} .carousel-inner > .item.next.left , .carousel-inner > .item.prev.right , .carousel-inner > .item.active{transform:translateY(0); -webkit-transform:translateY(0); -ms-transform:translateY(0);-moz-transform:translateY(0); -o-transform:translateY(0); top:0; left:0;} /*------------------------------- vertical carousel indicators ------------------------------*/ .carousel-indicators{ position:absolute; top:0; bottom:0; margin:auto; height:20px; right:10px; left:auto; width:auto; } .carousel-indicators li{display:block; margin-bottom:5px; border:1px solid #00a199; } .carousel-indicators li.active{margin-bottom:5px; background:#00a199;} /*-------- Animation slider ------*/ .animated{ animation-duration:3s; -webkit-animation-duration:3s; -moz-animation-duration:3s; -ms-animation-duration:3s; -o-animation-duration:3s; visibility:visible; opacity:1; transition:all 0.3s ease; } .carousel-img{ display: inline-block; margin: 0 auto; width: 100%; text-align: center; } .item img{margin:auto;visibility:hidden; opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease;} .item1 .carousel-img img , .item1.active .carousel-img img{max-height:300px;} .item1.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; animation-duration:2s; -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-delay:0.3s ; -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s;-ms-animation-delay:0.3s; } .item .carousel-desc{color:#fff; text-align:center;} .item h2{font-size:50px; animation-delay:1.5s;animation-duration:1s; } .item p{animation-delay:2.5s;animation-duration:1s; width:50%; margin:auto;} .item2 .carousel-img img , .item2.active .carousel-img img{max-height:300px;} .item2.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 0.3s ease; animation-duration:3s; animation-delay:0.3s} .item2 h2 , item2.active h2{visibility:hidden; opacity:0; transition:all 5s ease;} .item2.active h2.animated{visibility:visible; opacity:1; animation-delay:3s;} .item .fill{padding:0px 30px; display:table; } .item .inner-content{display: table-cell;vertical-align: middle;} .item3 .col-md-6{float:none; display:inline-block; vertical-align:middle; width:49%;} .item3.active .carousel-img img.animated{visibility:visible; opacity:1; transition:all 0.3s ease; animation-duration:2s; animation-delay:0.3s} .item3 h2 , item3.active h2{visibility:hidden; opacity:0; transition:all 5s ease; } .item.item3 .carousel-desc{text-align:left;} .item3.active h2.animated{visibility:visible; opacity:1; animation-delay:1.5s} .item3 p , item3.active p{visibility:hidden; opacity:0; transition:all 5s ease; width:100%; } .item3.active p.animated{visibility:visible; opacity:1; animation-delay:2.5s;} @media(max-width:991px) { .item .carousel-desc , .item.item3 .carousel-desc{text-align:center;} .item .carousel-desc p {width:80%;} .item3 .col-md-6{width:100%; text-align:center;} } @media(max-width:768px) { .item .carousel-img img, .item.active .carousel-img img{max-height:155px;} .item h2{font-size:30px; margin-top:0px;} .item .carousel-desc p{width:100%; font-size:12px;} } @media(max-width:480px) { .item h2{font-size:30px;} .item .carousel-desc p{width:100%;} }
$(document).ready(function(){ // invoke the carousel $('#myCarousel').carousel({ interval:6000 }); // scroll slides on mouse scroll $('#myCarousel').bind('mousewheel DOMMouseScroll', function(e){ if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { $(this).carousel('prev'); } else{ $(this).carousel('next'); } }); //scroll slides on swipe for touch enabled devices $("#myCarousel").on("touchstart", function(event){ var yClick = event.originalEvent.touches[0].pageY; $(this).one("touchmove", function(event){ var yMove = event.originalEvent.touches[0].pageY; if( Math.floor(yClick - yMove) > 1 ){ $(".carousel").carousel('next'); } else if( Math.floor(yClick - yMove) < -1 ){ $(".carousel").carousel('prev'); } }); $(".carousel").on("touchend", function(){ $(this).off("touchmove"); }); }); }); //animated carousel start $(document).ready(function(){ //to add start animation on load for first slide $(function(){ $.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass(animationName); }); } }); $('.item1.active img').animateCss('slideInDown'); $('.item1.active h2').animateCss('zoomIn'); $('.item1.active p').animateCss('fadeIn'); }); //to start animation on mousescroll , click and swipe $("#myCarousel").on('slide.bs.carousel', function () { $.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass(animationName); }); } }); // add animation type from animate.css on the element which you want to animate $('.item1 img').animateCss('slideInDown'); $('.item1 h2').animateCss('zoomIn'); $('.item1 p').animateCss('fadeIn'); $('.item2 img').animateCss('zoomIn'); $('.item2 h2').animateCss('swing'); $('.item2 p').animateCss('fadeIn'); $('.item3 img').animateCss('fadeInLeft'); $('.item3 h2').animateCss('fadeInDown'); $('.item3 p').animateCss('fadeIn'); }); });

Related: See More

Vuetify Material Dashboard
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments:

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 1

how to downlaod this...or this... where is images folder

abhimhasagar (-2) - 6 years ago - Reply -2

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 0

pradeep523 (1) - 3 years ago - Reply 0

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 0

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 0

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 0

Hi Utsavi Shah

This code is very much useful in my project. Thanks for writing this functionality.

How can we update it to Bootstrap4?

pradeep523 (1) - 3 years ago - Reply 0

Hi, Geeky Girl, this is a good stuff, but I want to implement it on Bootstrap 4, how can I solve it ?

Your answer will be helpful

arysfan () - 5 years ago - Reply 0

Hi I have use this snipp in my website http://kalarikendramdelhi.com/ it is very beautiful snipp

amar singh () - 7 years ago - Reply 0

Hi !

Your work seemed great until I test with chrome on mobile device.

When I swipe to change slide, the page scrolls in the time.
And it's not very practical.

Any solution ?

Sincerly.

Sébastien Mercier () - 7 years ago - Reply 0

Hello ,
Sorry for the inconvenience you faced.

currently bootstrap slider is set to auto slide ,
you can stop slides from auto sliding by using code :

$('#myCarousel').carousel({
interval:false
});
By setting interval as false it will stop sliding automatically !

I hope this helps to you !
Thanks

geeky girl () - 7 years ago - Reply 0

Hi, you have done an amazing job!!!

I have used this code for my first web, and it is ok, but sometimes I have an issue with Firefox.

In Chrome or Opera it is perfect everywhere, but in some computers (only in some computers), Firefox shows a bug which makes that, between animations, there is something like a "scroll left" (I don´t know how to explain it), leaving a white space between animations.

For example, it works great at home, but at school, in some computers it runs perfect, but sometimes not.

The funny thing, is that it happens here, even in your original code too, so it must be an issue with SOME firefox versions, but not a programming issue.

I have updated Firefox to latest version, tried to upload without complements, but the problem still goes on. Do you know what could be happening? It would be sad to delete it and use a slider plugin, since I have worked a lot for my customization :(

Thank you!

FranStoker () - 7 years ago - Reply 0

Hello FranStoker ,

Thank you for liking my work !

I am glad you used my snippet in your work , and it seems like you have put lots of efforts behind this .
I really want to help you out with this problem but I am really sorry i tested in many computers in Firefox but I couldn't found the issue :( , Can you please share video / URL / screenshot of the issue you are facing ,
I will try my level best to help you out !

It sounds like some interesting issue , so I am looking forward to here back from you ! :)
You can contact directly to me on my Email Id : geekygirl003@gmail.com .

geeky girl () - 7 years ago - Reply 0

Hi geeky girl!

I am actually working with localhost, so I can´t show you the work at the moment, but I will send you some screenshots with the bug to see if you can figure out what is happening.

Thanks for everything

FranStoker () - 7 years ago - Reply 0

Hello Fran Stoker ,
I have solved this issue , now it works fine.
I hope this helps :)
Thank You

geeky girl () - 7 years ago - Reply 0

nice work

scanfcode () - 7 years ago - Reply 0

Thank you for appreciating my work :)

geeky girl () - 7 years ago - Reply 0

Hi it is very nice work.
I have a problem. I use Bootstrap 4.0. I added my html page which write bootstrap 3.0 via jquery load function. $("#slider").load('animated_vertical_bootstrap_carousel_on_mouse_scroll_and_swipe.html');
when I add the code , My page breaks. How can i solve ? breaks css

problem's photos

https://scontent-otp1-1.xx....

Aziz Pir () - 7 years ago - Reply 0

Hello Aziz ,
Thank you for appreciating my work !
I would be glad to help you if you can share url of your issue , because I am not able to find out from screenshots that what could be the solution for this .

I hope this helps !
I would be glad to here you back and help you for the issue .
For any further queries you can contact me on : geekygirl003@gmail.com

geeky girl () - 7 years ago - Reply 0

I added a fourth slide and add <li data-target="#myCarousel" data-slide-to="3"></li> inside indicators an added item3 in animation script. Sllide is showing but image is not showing

Shrinivasa () - 7 years ago - Reply 0

Hello Shrinivasa,

Please add this part in your css :
.item4.active .carousel-img img.animated {
visibility: visible;
opacity: 1;
transition: all 0.3s ease;
animation-duration: 2s;
animation-delay: 0.3s
}
- here item4 is the class name of your item that you have added in your html .
- In current code initially image is hidden and it's opacity is 0 and it is visible once item is active .
so whenever you want to add another slide just add this much part in your css with required class name .

I hope this helps !
For any further queries you can contact me on : geekygirl003@gmail.com .

geeky girl () - 7 years ago - Reply 0