Going to carousel reload
I am using Bootstrap Carousel with a fade transition at the top of my site. The code looks like this:
[http://codepen.io/anon/pen/mJxYaz][1]
Now the fade transition is really smooth in code, but I've tried it both locally and on the localhost server, but somehow bottle it up. For some slides, transitions work smoothly. However, sometimes instead of fading it turns the page white and then switches to another slide. Now I want to know if this is caused by the browser JS timeout or by the fact that my localhost (or locale) is not handling it. How do I have too much JS / jQuery going on in my own site? I know all of this code is client-side, so I doubt if a dedicated server would do better.
I know this is kind of an open-ended question, but I would appreciate it if someone could tell me what I can do to get it done without issue as long as there are other parts on the site.
Thank!
EDIT: I would also appreciate it if someone could tell me how I can make Fade look more organic and not turn white.
source to share
Here's an example of how you can do this when your CSS is incorrectly configured.
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;
}
This is how you can restructure your carousel markup to work with 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 © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
A bit of JS:
$('.carousel').carousel({
interval: 5000 //changes the speed
})
source to share
The above worked great - except it just needs the height in the .item, active class, and padding 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;
}
source to share