"lel"
Bootstrap 3.3.0 Snippet by xrozix

<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> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item item1 active"> <div class="fill" style=" background-color:#FFF;"> <div class="inner-content"> <div class="carousel-img"> <img src="http://klinika.picave.pl/wp-content/uploads/2017/07/123_1_80.jpg" class="img img-responsive" /> </div> <div class="carousel-desc"> <h2>Tatą być, to brzmi dumnie!</h2> <p>Tatą być, to brzmi dumnie!"Jeden ojciec znaczy więcej niż stu nauczycieli"</p> </div> </div> </div> </div> <div class="item item2"> <div class="fill" style="background-color:#FFF;"> <div class="inner-content"> <div class="carousel-img"> <img src="http://klinika.picave.pl/wp-content/uploads/2017/07/1234.jpg" class="img img-responsive" /> </div> <div class="carousel-desc"> <h2>Kocham Cię Mamo.</h2> <p>Ze wszystkich kobiecych praw, najwspanialsze jest bycie mamą</p> </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 #D2A26D; } .carousel-indicators li.active{margin-bottom:5px; background:#D2A26D;} /*-------- 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:600px;} .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:#000; 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:600px;} .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;} @media(max-width:991px) { .item .carousel-desc , .item.item3 .carousel-desc{text-align:center;} .item .carousel-desc p {width:90%;} .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'); }); });

Related: See More


Questions / Comments: