I really needed a fullscreen background carousel for bootstrap with a fade effect and it took about 5 tutorials to put together because of the background aspect and finidng an effective fade effect so I thought I might as well share with you guys!
A Pen by Otis Wright on CodePen.
| <!-- Inspired by https://codepen.io/transportedman/pen/NPWRGq --> | |
| <div class="carousel slide carousel-fade" data-ride="carousel"> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Remeber to put all the content you want on top of the slider below the slider code --> | |
| <div class="title"> | |
| <h1>This is Awesome</h1> | |
| </div> |
| $('.carousel').carousel(); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> |
| html { | |
| position: relative; | |
| min-height: 100%; | |
| } | |
| .carousel-fade .carousel-inner .item { | |
| opacity: 0; | |
| transition-property: opacity; | |
| } | |
| .carousel-fade .carousel-inner .active { | |
| opacity: 1; | |
| } | |
| .carousel-fade .carousel-inner .active.left, | |
| .carousel-fade .carousel-inner .active.right { | |
| left: 0; | |
| opacity: 0; | |
| z-index: 1; | |
| } | |
| .carousel-fade .carousel-inner .next.left, | |
| .carousel-fade .carousel-inner .prev.right { | |
| opacity: 1; | |
| } | |
| .carousel-fade .carousel-control { | |
| z-index: 2; | |
| } | |
| @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); | |
| } | |
| } | |
| .item:nth-child(1) { | |
| background: url(https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?q=75&fm=jpg&s=55746bd56e02a131b1e48c12196ea866) no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| .item:nth-child(2) { | |
| background: url(https://ununsplash.imgix.net/reserve/oY3ayprWQlewtG7N4OXl_DSC_5225-2.jpg?q=75&fm=jpg&s=85ab821f3fa535036a68155aab571bad) no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| .item:nth-child(3) { | |
| background: url(https://unsplash.imgix.net/photo-1414073875831-b47709631146?q=75&fm=jpg&s=731b6d5150eea8bafa63ae8194e72ebd) no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| .carousel { | |
| z-index: -99; | |
| } | |
| .carousel .item { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .title { | |
| text-align: center; | |
| margin-top: 20px; | |
| padding: 10px; | |
| text-shadow: 2px 2px #000; | |
| color: #FFF; | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> |