A Pen by afmarchetti on CodePen.
Created
March 11, 2019 09:54
-
-
Save devtechgen/4d986d4fdbb348991361961a766082f3 to your computer and use it in GitHub Desktop.
Bootstrap Slider Full Screen with Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Full Page Image Background Carousel Header --> | |
<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 active"> | |
<!-- Set the first background image using inline CSS below. --> | |
<div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/code.jpg');"></div> | |
<div class="carousel-caption"> | |
<h2 class="animated fadeInLeft">Caption Animation</h2> | |
<p class="animated fadeInUp">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> | |
<p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p> | |
</div> | |
</div> | |
<div class="item"> | |
<!-- Set the second background image using inline CSS below. --> | |
<div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/conference.jpg');"></div> | |
<div class="carousel-caption"> | |
<h2 class="animated fadeInDown">Caption Animation</h2> | |
<p class="animated fadeInUp">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> | |
<p class="animated fadeInUp"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p> | |
</div> | |
</div> | |
<div class="item"> | |
<!-- Set the third background image using inline CSS below. --> | |
<div class="fill" style="background-image:url('http://www.marchettidesign.net/demo/optimized-bootstrap/campus.jpg');"></div> | |
<div class="carousel-caption"> | |
<h2 class="animated fadeInRight">Caption Animation</h2> | |
<p class="animated fadeInRight">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> | |
<p class="animated fadeInRight"><a href="#" class="btn btn-transparent btn-rounded btn-large">Learn More</a></p> | |
</div> | |
</div> | |
</div> | |
<!-- Controls --> | |
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> | |
<span class="icon-prev"></span> | |
</a> | |
<a class="right carousel-control" href="#myCarousel" data-slide="next"> | |
<span class="icon-next"></span> | |
</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, | |
body { | |
height: 100%; | |
} | |
.carousel, | |
.item, | |
.active { | |
height: 100%; | |
} | |
.carousel-inner { | |
height: 100%; | |
background: #000; | |
} | |
.carousel-caption{padding-bottom:80px;} | |
h2{font-size: 60px;} | |
p{padding:10px} | |
/* Background images are set within the HTML using inline CSS, not here */ | |
.fill { | |
width: 100%; | |
height: 100%; | |
background-position: center; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
background-size: cover; | |
-o-background-size: cover; | |
opacity:0.6; | |
} | |
/** | |
* Button | |
*/ | |
.btn-transparent { | |
background: transparent; | |
color: #fff; | |
border: 2px solid #fff; | |
} | |
.btn-transparent:hover { | |
background-color: #fff; | |
} | |
.btn-rounded { | |
border-radius: 70px; | |
} | |
.btn-large { | |
padding: 11px 45px; | |
font-size: 18px; | |
} | |
/** | |
* Change animation duration | |
*/ | |
.animated { | |
-webkit-animation-duration: 1.5s; | |
animation-duration: 1.5s; | |
} | |
@-webkit-keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100px, 0, 0); | |
transform: translate3d(100px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100px, 0, 0); | |
transform: translate3d(100px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRight { | |
-webkit-animation-name: fadeInRight; | |
animation-name: fadeInRight; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> | |
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this is not wrking man