CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
SJW
SJW

Reputation: 75

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 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.

Upvotes: 3

Views: 4933

Answers (2)

Jaztek
Jaztek

Reputation: 11

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

Upvotes: 1

vanburen
vanburen

Reputation: 21653

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

Upvotes: 2

Related Questions