轮播组件

  • 轮播可以用于banner多列表信息滚动，数据模块信息滚动。
实例一

  • 1

  • 2

  • 3

<div class="carousel" data-toggle="carousel">
    <ul>
      <li>
        <h1>1</h1>
      </li>
      <li>
        <h1>2</h1>
      </li>
      <li>
        <h1>3</h1>
      </li>
    </ul>
</div>


实例二
<div class="carousel" data-toggle="carousel" data-dots="true" data-prev="#prev" data-next="#next">
    <ul>
      <li>
        <a href="http://www.frontpay.cn"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf./static/superman/img/logo/bd_logo1_31bdc765.png" alt=""></a>
      </li>
      <li>
        <a href="http://www.frontpay.cn"><img src="https://www.sogou.com/index/images/logo_440x140.png" alt=""></a>
      </li>
      <li>
        <a href="http://www.frontpay.cn"><img src="http://p3.qhmsg.com/t01b7cb83f41d31a8bf.png" alt=""></a>
      </li>
    </ul>
</div>

<!-- 外部控制 -->
<a href="#" class="btn primary" id="prev">上一张</a>
<a href="#" class="btn thirdly" id="next">下一张</a>


参数配置

实例
属性 默认值 描述
css3 true css3动画优先
speed 300 切换动画时间间隔
delay null 自动轮播，当值大于0时启动
complete $.noop 切换完成回调
keys null 键盘控制按键
dots null 是否显示索引
fluid true 是否响应式
prev null 上一张按钮
next null 下一张按钮
arrows true 是否显示箭头图标
prevText '<' 上一张按钮文字
nextText '>' 下一张按钮文字