Amaze UI

Slider

轮播图插件,一个极简的轮播头图插件,提供基本的功能。

基础使用

Copy
<div class="am-slider" data-am-slider>
  <ul class="am-slider-wrapper">
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt="">
    </li>
  </ul>
</div>

轮播图只提供基础的功能, 每个 slide 使用 li 标签, 如需扩展可自定义加入其它元素

在线运行

自动播放

鼠标移入自动暂停。

Copy
<div class="am-slider" data-am-slider="{autoplay: true}">
  <ul class="am-slider-wrapper">
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt="">
    </li>
    <li class="am-slider-item">
      <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt="">
    </li>
  </ul>
</div>

data-am-slider 属性传入 autoplay 参数即可。

  • true 移入暂停
  • false 默认flase

在线运行

参数说明

参数类型默认值描述
widthstring'100%'轮播图宽度
heightstring'100%'轮播图高度
speedstring'200ms'轮播速度
infiniteLoopbooleantrue无限滚动
autoplaybooleanfalse自动滚动
autoplaySpeednumber1000自动滚动速度
arrowbooleantrue设置箭头导航
dotsbooleantrue设置底部点导航
arrowPrestring'<span class="am-slider-arrow-prev am-icon-arrow-left"></span>'向前箭头
arrowNextstring'<span class="am-slider-arrow-next am-icon-arrow-right"></span>'向后箭头
keyboardbooleantrue是否启用键盘导航

方法

  • getIndex - 获取轮播图顺序值
  • next - 进入下一张
  • prev - 进入上一张

事件

  • change.slider.amui - 轮播图改变立即触发

说明

此轮播图插件只提供基本功能,如有更加复杂的需求,可使用以下插件: