使用Cubic Bizer更改Bootstrap Carousel动画持续时间

时间：2017-01-27 06:25:07

标签： javascript jquery html css twitter-bootstrap

Hello People 我工作变更Bootstrap幻灯片动画方向和我试图改变我的Bootstrap Carousel幻灯片动画但有一些问题：

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

注意：请在全屏幕中运行代码段

2 个答案:

答案 0 :(得分：1)

您是否尝试删除CSS？您将自动从引导程序获取CSS。 如果要覆盖Bootstraps 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>

答案 1 :(得分：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;

且.item transition-duration值必须等于carousel.Constructor.TRANSITION_DURATION值：

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

完整代码在这里：

＆＃13;
＆＃13; 
var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */
        $.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
		$(".carousel-inner .item").css({
		'-webkit-transition-duration': itemDurVal + 'ms',
		'-moz-transition-duration': itemDurVal + 'ms',
		'transition-duration': itemDurVal + 'ms'
		});
＆＃13; 
@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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题