ブートストラップ3 - フェージングの移行を伴う背景としてのカルーセル

Question

私は自分のサイトの背景としてブートストラップカルーセルを使用しようとしています。私は背景として標準のカルーセルを積極的に追加しましたが、フェード移行を行うためのすべてのコードやチュートリアルは失敗します。これは私が今のために作られたものです。

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 

... 

    <div id="myCarousel" class="carousel slide fill" data-ride="carousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div id="first" class="fill"></div> 
      </div> 

      <div class="item"> 
       <div id="second" class="fill"></div> 
      </div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="signin-form"> 
      <form class="form-signin" method="post" id="login-form"> 
       <h2 class="form-signin-heading" align="center">Login</h2> 
       <hr /> 
       <div id="error" > 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="User" name="user_name" id="user" /> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" placeholder="Password" name="user_password" id="user_password" /> 
       </div> 
       <hr /> 
       <div class="form-group"> 
        <button type="submit" class="btn btn-default" name="btn-login" id="btn-login"> 
         <span class="glyphicon glyphicon-log-in"></span> &nbsp; Accedi 
        </button> 
       </div> 
      </form> 
     </div> 
    </div> 


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

CSS：

@import url(https://fonts.googleapis.com/css?family=Cherry+Swash); 
body, html{ 
    height:100%; 
    margin:0; 
    padding:0; 
    color:#222; 
    font-family: 'Cherry Swash', trebuchet ms, cursive; 
    font-size:1.5em 
} 
a{color:#930; text-decoration:none} 

.form-signin { 
    max-width: 500px; 
    padding: 19px 29px 29px; 
    margin: 20px auto; 
    margin-top:1%; 
    background-color: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    background-color:rgba(255,255,255,.7); 

    border: 1px solid #e5e5e5; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
      box-shadow: 0 1px 2px rgba(0,0,0,.05); 

    font-family:Tahoma, Geneva, sans-serif; 
    color:#990000; 
    font-weight:lighter; 

    padding:1em; 
    border-radius:15px; 
    box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
    text-shadow: 1px 1px 5px #fff 
} 

.form-signin .form-signin-heading{ 
    color:#00A2D1; 
} 
.form-signin input[type="text"], 
.form-signin input[type="password"], 
.form-signin input[type="email"] { 
    font-size: 16px; 
    height: 45px; 
    padding: 7px 9px; 
} 


.signin-form, .body-container 
{ 
    margin-top:110px; 
} 

#myCarousel{ 
    position:fixed; 
    z-index:-1; 
} 
.item,.active{ 
    height:100%; 
    -webkit-filter: blur(2px); 
} 
.carousel-inner{ 
    height:100%; 
    } 
.fill{ 
    width:100%; 
    height:100%; 
    background-position:center; 
    background-size:cover; 
} 
#first{ 
    background-image: url('../../images/1.jpg'); 
} 
#second{ 
    background-image: url('../../images/2.jpg'); 
} 

JS：

$("#myCarousel").carousel({ 
    interval: 500, 
    pause: 'none' 
    }); 

塗りつぶしクラスは、ウィンドウ内に画像を適合させるために使用されます。

私はthisの解決策を試しましたが、正しく実行できません。おそらく問題は.cssの混乱と混乱していたためです。どこが間違っている？

Answer 1

添付のcodepenからコードを取り出し、それをすべて提供しているコードに適用すると、調整が必要なビットがいくつかあります。

carousel-fadeクラスは、以下のcssが正しく動作するように、メインのカルーセル要素に追加する必要があります。

jsファイルの間隔も増やしました。 500に放置すると、スライドの切り替えによってフェードアニメーションが中断し、不安定な効果が生じました。

HTML

<!-- Add 'carousel-fade' class to the carousel element --> 
<div id="myCarousel" class="carousel slide fill carousel-fade"> 

CSS（出典：https://codepen.io/transportedman/pen/NPWRGq）

/* Add this to the bottom of your CSS */ 
.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    transition-property: opacity; 
} 

.carousel-fade .carousel-inner .active { 
    opacity: 1; 
} 

.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 

.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1; 
} 

.carousel-fade .carousel-control { 
    z-index: 2; 
} 

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-fade .carousel-inner > .item.next, 
    .carousel-fade .carousel-inner > .item.active.right { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
       transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.prev, 
    .carousel-fade .carousel-inner > .item.active.left { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
       transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.next.left, 
    .carousel-fade .carousel-inner > .item.prev.right, 
    .carousel-fade .carousel-inner > .item.active { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
       transform: translate3d(0, 0, 0); 
    } 
} 

JS

// Change interval to 2000 
$("#myCarousel").carousel({ 
    interval: 2000, 
    pause: 'none' 
}); 

実例：https://codepen.io/raptorkraine/pen/MEgjwe