wild84
wild84
采纳率91.6%
2017-12-23 06:04 阅读 1.4k

bootstrap的轮播动画如何修改?

5

bootstrap默认的动画都是slide,我想要换成其他的动画效果应该如何修改?
如有请大神附带上源码,谢谢!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    gongqinghui3368 gongqinghui3368 2017-12-23 08:36
    点赞 评论 复制链接分享
  • dabocaiqq dabocaiqq 2017-12-23 14:52
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
     </li>
     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
     </ol>
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
    
     <!-- First slide -->
     <div class="item active">
     <div class="carousel-caption">
     <h3 data-animation="animated bounceInLeft">
     This is the caption for slide 1
     </h3>
     <h3 data-animation="animated bounceInRight">
     This is the caption for slide 1
     </h3>
     <button class="btn btn-primary btn-lg"
     data-animation="animated zoomInUp">Button</button>
     </div>
     </div><!-- /.item -->
    
     <!-- Second slide -->
     <div class="item">
     <div class="carousel-caption">
     <h3 class="icon-container" data-animation="animated bounceInDown">
     <span class="glyphicon glyphicon-heart"></span>
     </h3>
     <h3 data-animation="animated bounceInUp">
     This is the caption for slide 2
     </h3>
     <button class="btn btn-primary btn-lg"
     data-animation="animated zoomInRight">Button</button>
     </div>
     </div><!-- /.item -->
    
     <!-- Third slide -->
     <div class="item">
     <div class="carousel-caption">
     <h3 class="icon-container" data-animation="animated zoomInLeft">
     <span class="glyphicon glyphicon-glass"></span>
     </h3>
     <h3 data-animation="animated flipInX">
     This is the caption for slide 3
     </h3>
     <button class="btn btn-primary btn-lg"
     data-animation="animated lightSpeedIn">Button</button>
     </div>
     </div><!-- /.item -->
     </div><!-- /.carousel-inner -->
    
     <!-- Controls -->
     <a class="left carousel-control" href="#carousel-example-generic"
     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="#carousel-example-generic"
     role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
     </a>
    
    </div><!-- /.carousel -->
    
    点赞 1 评论 复制链接分享
  • IXI0514 ShenBL 2017-12-23 06:59
    点赞 评论 复制链接分享
  • dcxy0 Q544471255 2017-12-23 07:51

    直接换其他的轮播不就行了?

    参考:

    http://www.swiper.com.cn/

    点赞 评论 复制链接分享

相关推荐