"Bootstrap 4 Fade Carousel"
Bootstrap 4.0.0 Snippet by moisea

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha256-IPtNBA1od/cGBfXTxYDxuT5+Y2BKy14o6j0FaIXDmYk=" crossorigin="anonymous" /> <nav class="navbar navbar-fixed-top navbar-dark bg-primary"> <a class="navbar-brand" href="#"> <img height="32" width="32" src="https://soldierupdesigns.com/favicon/favicon-32x32.png" class="d-inline-block align-top" alt="Responsive image"> <span class="pull-right"> Soldier-up Designs</span> </a> <!-- Links --> <ul class="nav navbar-nav"> <!-- Brand --> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> <ul class="nav navbar-nav pull-sm-right"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </nav> <div class="masthead"><!-- for Responsive Viewport (Insert Carousel or other item for "cover" effect) --> <!-- Carousel container --> <div id="suds-carousel" class="carousel fade-carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#suds-carousel" data-slide-to="0" class="active"></li> <li data-target="#suds-carousel" data-slide-to="1"></li> <li data-target="#suds-carousel" data-slide-to="2"></li> </ol> <!-- Content --> <div class="carousel-inner" role="listbox"> <!-- Slide 1 --> <div class="carousel-item active"> <div class="carousel-caption"> <hgroup> <h1>Web Design/ Development</h1> <h3>Isn't it so much fun to code and play?'</h3> <a type="button" class="btn btn-primary btn-lg" role="button" href="#attributes">Learn more</a> </hgroup> </div> <div class="slide-1"></div> </div> <!-- Slide 2 --> <div class="carousel-item"> <div class="carousel-caption"> <hgroup> <h1>Love Coding?</h1> <h3>Click button to know more</h3> <a type="button" class="btn btn-hero btn-lg" role="button" href="#">Know more</a> </hgroup> </div> <div class="slide-2"></div> </div> <!-- Slide 3 --> <div class="carousel-item"> <div class="carousel-caption"> <hgroup> <h1>Bootstrap 4 is Awesome</h1> <h3>Love Bootstrap for its Methodologies, and styling </h3> <a type="button" class="btn btn-danger btn-lg" role="button" href="#">Learn more</a> </hgroup> </div> <div class="slide-3"></div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid col-md-6 pull-left"> <h3 class="display-5 text-xs-center">Fullscreen Fade Bootstrap V4Alpha Carousel (HTML)</h3> <pre class="pre-scrollable"> <code class="lang-html"> <!-- Bootstrap 4 Carousel with Fade Captions Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com Image credits: unsplash.com --> /* Bs Fade carousel */ <div class="masthead"><!-- for Responsive Viewport (Insert Carousel or other item for "cover" effect) --> <!-- Carousel container --> <div id="suds-carousel" class="carousel fade-carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#suds-carousel" data-slide-to="0" class="active"></li> <li data-target="#suds-carousel" data-slide-to="1"></li> <li data-target="#suds-carousel" data-slide-to="2"></li> </ol> <!-- Content --> <div class="carousel-inner" role="listbox"> <!-- Slide 1 --> <div class="carousel-item active"> <div class="carousel-caption"> <hgroup> <h1>Web Design/ Development</h1> <h3>Isn't it so much fun to code and play?'</h3> <a type="button" class="btn btn-primary btn-lg" role="button" href="#attributes">Learn more</a> </hgroup> </div> <div class="slide-1"></div> </div> <!-- Slide 2 --> <div class="carousel-item"> <div class="carousel-caption"> <hgroup> <h1>Love Coding?</h1> <h3>Click button to know more</h3> <a type="button" class="btn btn-hero btn-lg" role="button" href="#">Know more</a> </hgroup> </div> <div class="slide-2"></div> </div> <!-- Slide 3 --> <div class="carousel-item"> <div class="carousel-caption"> <hgroup> <h1>Bootstrap 4 is Awesome</h1> <h3>Love Bootstrap for its Methodologies, and styling </h3> <a type="button" class="btn btn-danger btn-lg" role="button" href="#">Learn more</a> </hgroup> </div> <div class="slide-3"> </div> </div> </div> </div> </div> </code> </pre> </div> <div class="row-fluid col-md-6 pull-right"> <h3 class="display-5 text-xs-center">Fullscreen Fade Bootstrap V4Alpha Carousel (CSS)</h3> <pre class="pre-scrollable"> <code class="lang-css"> /* Bootstrap 4 Carousel with Fade Captions Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com Image credits: unsplash.com */ /* Bs Fade carousel */ .fade-carousel{ position: relative; height: 100vh; } .fade-carousel .carousel-inner .carousel-item{ height: 100vh; } .fade-carousel .carousel-indicators > li{ margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active{ width: 10px; height: 10px; opacity: 1; } /* Carousel Captions */ .fade-carousel .carousel-inner .carousel-caption{ top: 50%; left: 50%; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .fade-carousel .carousel-inner .carousel-caption h1{ font-size:200%; font-weight: 800; margin: 0; padding: 0; } .fade-carousel .carousel-inner .carousel-caption{ opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .active .carousel-caption { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /* Custom Buttons */ .btn.btn-lg { padding: 10px 40px; outline: none; margin: 20px auto; } .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus{ color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /* Slides backgrounds */ .fade-carousel .carousel-inner .slide-1, .fade-carousel .carousel-inner .slide-2, .fade-carousel .carousel-inner .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .carousel-inner .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .fade-carousel .carousel-inner .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .carousel-inner .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } </code> </pre> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha256-SHXnnZAbgSEf+OBhDLR7I2mx9vNZAIzPeCGhxRV+VQw=" crossorigin="anonymous"></script>
@charset "utf-8"; @import url("https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"); /* Global Styles */ *, *: before, *:after{ -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ .linenums li { list-style-type: decimal; } /* Alternate shading for lines */ li.L1, li.L3, li.L5, li.L7, li.L9{ background: #eee; } body{ width: 100%; height: 100%; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; } html{ width: 100%; height: 100%; } a:hover{ text-decoration:none; } .container-fluid{ padding-top: 150px; padding-bottom: 150px; } /* Masthead (Header) */ .masthead{ display: table; position: relative; min-width: 100%; min-height: 100%; width: 100%; height: 100%; background: transparent url("https://soldierupdesigns.com/img/bg.jpg") no-repeat fixed 0px 0px / cover; z-index: 800; background-color:#000; margin-left:auto; margin-right:auto; } /* Bootstrap 4 Carousel with Fade Captions Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com Image credits: unsplash.com */ /* Bs Fade carousel */ .fade-carousel{ position: relative; height: 100vh; } .fade-carousel .carousel-inner .carousel-item{ height: 100vh; } .fade-carousel .carousel-indicators > li{ margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active{ width: 10px; height: 10px; opacity: 1; } /* Carousel Captions */ .fade-carousel .carousel-inner .carousel-caption{ top: 50%; left: 50%; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .fade-carousel .carousel-inner .carousel-caption h1{ font-size:200%; font-weight: 800; margin: 0; padding: 0; } .fade-carousel .carousel-inner .carousel-caption{ opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .active .carousel-caption { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /* Custom Buttons */ .btn.btn-lg { padding: 10px 40px; outline: none; margin: 20px auto; } .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus{ color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /* Slides backgrounds */ .fade-carousel .carousel-inner .slide-1, .fade-carousel .carousel-inner .slide-2, .fade-carousel .carousel-inner .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .carousel-inner .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .fade-carousel .carousel-inner .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .carousel-inner .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); }
window.onload = (function(){ prettyPrint(); }); $(document).ready(function() { var prettyprint = false; $("pre code").parent().each(function() { $(this).addClass('prettyprint linenums'); prettyprint = true; }); if ( prettyprint ) { $.getScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js", function() { prettyPrint() }); } });

Related: See More


Questions / Comments: