Bootstrap Carousel Fade Transition

I am using Bootstrap Carousel with fade transition at the top of my website.The code looks like as follows: [http://codepen.io/anon/pen/mJxYaz][1] Now the fade transition is reall

Solution 1:

Here's an example of how this can be done with some adjusting to your CSS.

html, body {
    height: 100%;
}
.navbar-brand {
    width: 70px;
    height: 50px;
    background: url('http://matthewjstrauss.com/wp-content/uploads/2013/07/twitter-bootstrap-logo.png') no-repeat center center;
    background-size: 50px;
}
.navbar {
    background-color: #fff;
}
.carousel, .item, .active {
    height: 100%;
}
.carousel-inner {
    height: 100%;
}
.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.carousel.fade {
    opacity: 1;
}
.carousel.fade.item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0!important;
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    display: block !important;
    z-index: 1;
}
.carousel.fade.item:first-child {
    top: auto;
    position: relative;
}
.carousel.fade.item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    z-index: 2;
}
.carousel-control {
    z-index: 2;
}
footer {
    margin: 0px25px25px25px;
    text-align: center;
}

Here's how you can restructure your carousels markup to work with the CSS now.

<navclass="navbar navbar-default navbar-fixed-top"role="navigation"><divclass="container"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#"></a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><li><ahref="#">About</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container --></nav><!-- Full Page Image Background Carousel Header --><headerid="myCarousel"class="carousel fade"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Wrapper for Slides --><divclass="carousel-inner"><divclass="item active"><!-- Set the first background image using inline CSS below. --><divclass="fill"style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div></div><divclass="item"><!-- Set the second background image using inline CSS below. --><divclass="fill"style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div></div><divclass="item"><!-- Set the third background image using inline CSS below. --><divclass="fill"style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div></div></div><!-- Controls --><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"></span></a></header><imgsrc="http://placehold.it/2100x500/f00/ffffff One"class="img-responsive"alt="Nope"><imgsrc="http://placehold.it/2100x500/266080/ffffff One"class="img-responsive"alt="Nope"><imgsrc="http://placehold.it/2100x500/547842/ffffff One"class="img-responsive"alt="Nope"><imgsrc="http://placehold.it/2100x500/267842/ffffff One"class="img-responsive"alt="Nope"><!-- Page Content --><divclass="container-fluid"><hr><!-- Footer --><footer><divclass="row"><divclass="col-lg-12"><p>Copyright &copy; Your Website 2014</p></div></div><!-- /.row --></footer></div>

A little JS:

  $('.carousel').carousel({
  interval: 5000//changes the speed
  })

Solution 2:

The above worked great - except it just needed a height on the .item, .active class and the fill to work.

.carousel, .item, .active {
width: 100%;
height: 340px;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 340px;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}