easySlider.js是一款轻量级、简单易用的响应式jQuery轮播图插件。easySlider.js可以根据视口的大小来动态修改轮播图的尺寸。它压缩后的版本仅5K大小，简单实用。

使用方法

在页面中引入jquery和easySlider.js文件，以及样式文件style.css。

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="dist/js/jquery.min.js"></script>                  
<script src="dist/js/easySlider.js"></script>                  
                

HTML结构

该轮播图的HTML结构如下：

<div id="slider">
  <ul class="slides">
    <li><img class="responsive" src="http://placehold.it/350x150"></li>
    <li><img class="responsive" src="http://placehold.it/350x150"></li>
    <li><img class="responsive" src="http://placehold.it/350x150"></li>    
  </ul>

  <ul class="controls">
    <li><img src="img/prev.png" alt="previous"></li>
    <li><img src="img/next.png" alt="next"></li>
  </ul>

  <ul class="pagination">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>     
                

初始化插件

在页面DOM元素加载完毕之后，可以通过easySlider()方法来初始化该轮播图插件。

$(function() {
    $("#slider").easySlider({});
});
                

配置参数

easySlider.js轮播图插件的可用配置参数有：

easySlider.js轮播图插件的github地址为：https://github.com/prose100/jQuery-slider

在线预览    源码下载