滑块Slider

滑块可添加图片元素或HTML内容,支持移动端触滑功能

滑块 Slider - 图1

  1. <div class="slider">
  2. <ul class="content">
  3. <li><img src="imgurl"></li>
  4. <li><img src="imgurl"></li>
  5. <li><img src="imgurl"></li>
  6. </ul>
  7. </div>

标题Heading

为<li>元素添加data-title属性设定滑块标题

滑块 Slider - 图2

  1. <div class="slider">
  2. <ul class="content">
  3. <li data-title="Aurora over Jokulsarlon"><img src="imgurl"></li>
  4. <li data-title="Beach Ice"><img src="imgurl"></li>
  5. <li data-title="A Moraine Morning"><img src="imgurl"></li>
  6. </ul>
  7. </div>

自定义内容Custom

可任意添加文本内容

滑块 Slider - 图3

  1. <div class="slider">
  2. <ul class="content">
  3. <li>
  4. <div class="bg-blue c-fff" style="padding:1rem;">
  5. <h5>Benefits of registration include:</h5>
  6. <ol class="baselist">
  7. <li>Check your order status</li>
  8. <li>Fast and easy checkout</li>
  9. <li>Track order status and history</li>
  10. <li>Store your shipping and billing addresses to save time on your next purchase</li>
  11. </ol>
  12. </div>
  13. </li>
  14. <li>
  15. <div class="bg-green c-fff" style="padding:1rem;">
  16. <h5>Benefits of registration include:</h5>
  17. <ol class="baselist">
  18. <li>Check your order status</li>
  19. <li>Fast and easy checkout</li>
  20. <li>Track order status and history</li>
  21. <li>Store your shipping and billing addresses to save time on your next purchase</li>
  22. </ol>
  23. </div>
  24. </li>
  25. </ul>
  26. </div>

播放间隔Play Timeout

添加data-play-timeout属性设定滑块的播放间隔时间,单位是ms毫秒,默认值为3000,可设定的最小值为500

滑块 Slider - 图4

  1. <div class="slider" data-play-timeout="1000">
  2. ...
  3. </div>

停止播放Play Stop

添加data-play-stop属性使滑块停止自动播放

滑块 Slider - 图5

  1. <div class="slider" data-play-stop>
  2. ...
  3. </div>