更改引導輪播動畫時長使用三次Bizer

Question

你好的人我的工作變化引導幻燈片動畫方向和我試圖改變我的引導旋轉木馬幻燈片的動畫，但也存在一些問題：

@media all and (transform-3d), 
 
(-webkit-transform-3d) { 
 
    #my-carousel > .carousel-inner > .item { 
 
    -webkit-transition-property: -webkit-transform; 
 
    transition-property: transform; 
 
    } 
 
    #my-carousel > .carousel-inner > .item.next, 
 
    #my-carousel > .carousel-inner > .item.active.right { 
 
    top: 0; 
 
    left: auto; 
 
    /*default Of Bootstrap Left: 0*/ 
 
    transform: translate3d(0, 100%, 0); 
 
    } 
 
    #my-carousel > .carousel-inner > .item.prev, 
 
    #my-carousel > .carousel-inner > .item.active.left { 
 
    top: 0; 
 
    transform: translate3d(0, -100%, 0); 
 
    } 
 
    #my-carousel > .carousel-inner > .item.next.left, 
 
    #my-carousel > .carousel-inner > .item.prev.right, 
 
    #my-carousel > .carousel-inner > .item.active { 
 
    top: 0; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 
#my-carousel > .carousel-inner > .active { 
 
    top: 0; 
 
} 
 
#my-carousel > .carousel-inner > .next, 
 
#my-carousel > .carousel-inner > .prev { 
 
    top: 0; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 
#my-carousel > .carousel-inner > .next { 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
#my-carousel > .carousel-inner > .prev { 
 
    left: 0; 
 
    top: -100% 
 
} 
 
#my-carousel > .carousel-inner > .next.left, 
 
#my-carousel > .carousel-inner > .prev.right { 
 
    top: 0; 
 
} 
 
#my-carousel > .carousel-inner > .active.left { 
 
    left: 0; 
 
    top: -100%; 
 
} 
 
#my-carousel > .carousel-inner > .active.right { 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
/*Animation Cubic Bizer*/ 
 

 
#my-carousel .carousel-inner > .item { 
 
    transition-timing-function: cubic-bezier(.24,1.01,.3,.53); 
 
    transition: 4s ease-in-out top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#my-carousel" data-slide-to="1"></li> 
 
    <li data-target="#my-carousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 2</h3> 
 
     <p>Morbi eget libero quis metus consectetur semper.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 3</h3> 
 
     <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

說明：請將代碼段全屏顯示在代碼中

Answer 1

你只需要刪除此代碼：

transition: 4s ease-in-out top; 

，使項目是這樣的：

#my-carousel .carousel-inner > .item { 

      transition-timing-function: cubic-bezier(.23,1,.32,1); 
      transition: 4s ease-in-out top; 
     } 

你也需要改變carousel.Constructor.TRANSITION_DURATION：

首先，你必須使用jQuery data()獲取數據時間價值函數：

var itemDurVal = $(".carousel").data("duration"); 
/*get data-duration value of my carousel */ 

然後您可以更改幻燈片動畫：

即同步過渡和防止幻燈片之前的過渡兩端消失。

$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal; 

而且.itemtransition-duration值必須等於carousel.Constructor.TRANSITION_DURATION值：

$(".carousel-inner .item").css({ 
      '-webkit-transition-duration': itemDurVal + 'ms', 
      '-moz-transition-duration': itemDurVal + 'ms', 
      'transition-duration': itemDurVal + 'ms' 
      }); 

全部代碼是在這裏：

var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */ 
 
     $.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal; 
 
\t \t $(".carousel-inner .item").css({ 
 
\t \t '-webkit-transition-duration': itemDurVal + 'ms', 
 
\t \t '-moz-transition-duration': itemDurVal + 'ms', 
 
\t \t 'transition-duration': itemDurVal + 'ms' 
 
\t \t });

@media all and (transform-3d), 
 
(-webkit-transform-3d) { 
 
    #my-carousel > .carousel-inner > .item { 
 
    -webkit-transition-property: -webkit-transform; 
 
    transition-property: transform; 
 
    } 
 
    #my-carousel > .carousel-inner > .item.next, 
 
    #my-carousel > .carousel-inner > .item.active.right { 
 
    top: 0; 
 
    left: auto; 
 
    /*default Of Bootstrap Left: 0*/ 
 
    transform: translate3d(0, 100%, 0); 
 
    } 
 
    #my-carousel > .carousel-inner > .item.prev, 
 
    #my-carousel > .carousel-inner > .item.active.left { 
 
    top: 0; 
 
    transform: translate3d(0, -100%, 0); 
 
    } 
 
    #my-carousel > .carousel-inner > .item.next.left, 
 
    #my-carousel > .carousel-inner > .item.prev.right, 
 
    #my-carousel > .carousel-inner > .item.active { 
 
    top: 0; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 
#my-carousel > .carousel-inner > .active { 
 
    top: 0; 
 
} 
 
#my-carousel > .carousel-inner > .next, 
 
#my-carousel > .carousel-inner > .prev { 
 
    top: 0; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 
#my-carousel > .carousel-inner > .next { 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
#my-carousel > .carousel-inner > .prev { 
 
    left: 0; 
 
    top: -100% 
 
} 
 
#my-carousel > .carousel-inner > .next.left, 
 
#my-carousel > .carousel-inner > .prev.right { 
 
    top: 0; 
 
} 
 
#my-carousel > .carousel-inner > .active.left { 
 
    left: 0; 
 
    top: -100%; 
 
} 
 
#my-carousel > .carousel-inner > .active.right { 
 
    left: 0; 
 
    top: 100%; 
 
} 
 
/*Animation Cubic Bizer*/ 
 

 
#my-carousel .carousel-inner > .item { 
 
    transition-timing-function: cubic-bezier(.24,1.01,.3,.53); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#my-carousel" data-slide-to="1"></li> 
 
    <li data-target="#my-carousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 2</h3> 
 
     <p>Morbi eget libero quis metus consectetur semper.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 3</h3> 
 
     <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 2

Have you t是否刪除了CSS？您將自動引導獲得CSS。 如果要覆蓋白手起家CSS試圖把!important在CSS的行之後。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#my-carousel" data-slide-to="1"></li> 
 
    <li data-target="#my-carousel" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 2</h3> 
 
     <p>Morbi eget libero quis metus consectetur semper.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg"> 
 
     <div class="carousel-caption"> 
 
     <h3>Caption heading 3</h3> 
 
     <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>