Bootstrap Carousel Fade Transition

Question

Я использую Bootstrap карусель с переходом к выцветанию в верхней части моего website.The кода выглядит следующим образом:

[http://codepen.io/anon/pen/mJxYaz][1] 

Теперь переход выцветанию действительно гладкий на codepen, но у меня пробовал его как локально, так и на локальном сервере, но как-то его бутылочку. Для некоторых слайдов переходы работают плавно. Однако иногда вместо выцветания он превращает страницу в белый цвет, а затем переключается на другой слайд. Теперь я хочу знать, вызвано ли это тайм-аутом JS браузера или тем фактом, что мой локальный хост (или локально) не справляется с этим. Как у меня слишком много JS/jQuery происходит на моем собственном сайте? Я знаю, что весь этот код является клиентским, поэтому я сомневаюсь, сделает ли выделенный сервер лучше.

Я знаю, что это своего рода вопрос с открытым концом, но я был бы признателен, если бы кто-нибудь мог сообщить мне, что я могу сделать, чтобы сделать это нормально, пока есть другие части на сайте.

Спасибо!

EDIT: Я также был бы признателен, если бы кто-нибудь мог сказать мне, как я могу заставить выцветать выглядеть более органично, и пусть он не станет белым.

Answer 1

Вот пример того, как это можно сделать с некоторой настройкой на ваш 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; 
} 

Вот как вы можете реструктурировать разметку каруселей для работы с CSS сейчас.

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

Немного JS:

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

Answer 2

выше работал большой - за исключением того, что просто необходимо в высоту на .item, .active класса и заливки на работу.

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