Bootstrap Carousel Fade Transition

Question

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 really smooth on codepen, but I've tried it both locally and also on localhost server but its being bottle-necked somehow. For some slides the transitions work smoothly. However, sometimes instead of fading, it turns the page white and then switches to the other slide. Now I want to know whether this is caused by the browser's JS timeout or the fact that my localhost(or locally) cant handle it. Like do I have too many JS/jQuery going on my own website? I know all this code is client-side so I doubt whether a dedicated server will do any better.

I know this is kind of an open ended question but I would appreciate it If someone could let me know what I can do to make this run smoothly while there are other parts to the website too.

Thanks!

EDIT: I would also appreciate it if someone could tell me how I can make the fade look more organic and have it not flash white.

it is smooth for me on codepen, but page also turns white quickly and then the other picture fades in. — Ji_in_coding, Jul 08 '15 at 14:39
No thats not the problem, thats just the only weird way of doing a fade transition apparently using bootstrap carousel (I wish there was a way of doing it normally). But as I said, its not smooth when its with other stuff on localhost (or locally). Its just three snapshots, the slide, the white screen and the next slide. — SJW, Jul 08 '15 at 14:53
For Bootstrap 4 and newer: https://stackoverflow.com/questions/48665392/bootstrap-4-0-0-carousel-fade-transition/48666153#48666153 — Carol Skelly, Jun 18 '21 at 16:51

vanburen · Accepted Answer · 2015-07-09T09:39:06.120

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: 0px 25px 25px 25px;
    text-align: center;
}

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

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
            </button> <a class="navbar-brand" href="#"></a> 
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li> <a href="#">About</a> 
                </li>
                <li> <a href="#">Services</a> 
                </li>
                <li> <a href="#">Contact</a> 
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
    <!-- 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://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="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>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>  <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</header>
<img src="http://placehold.it/2100x500/f00/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/266080/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/547842/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/267842/ffffff One" class="img-responsive" alt="Nope">
<!-- Page Content -->
<div class="container-fluid">
    <hr>
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="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
  })

Thanks so much! Hey can you have a look at the codepen again? The code you give me works without the js code but the js code somehow ruins your code and only works with my code. — SJW, Jul 08 '15 at 19:52
But once you change the position to fixed, the slide takes up anything that is on the page (I have alot of other stuff on the page besides this carousel). So if the carousel was the only thing on the page it would've worked otherwise not in my case. Right now I just see no pictures. Its as if its not finding the pictures...http://codepen.io/anon/pen/mJxYaz — SJW, Jul 08 '15 at 20:42
Yea, I don't know what sort of behavior is needed since i only know about the slider itself. — vanburen, Jul 08 '15 at 21:37
With a bit more "fiddling" around with your final code. I got it working with. Thank you very very much man, means alot! — SJW, Jul 09 '15 at 19:12

score 1 · Answer 2 · answered Jul 13 '16 at 17:27

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;
}

Bootstrap Carousel Fade Transition

2 Answers2

Linked