幻灯片/轮播
最简单响应式jQuery轮播图插件
PetitQ
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 轮播图插件的可用配置参数有：
| 参数 | 默认值 | 描述 |
| slideSpeed | 500 | 轮播图切换的过渡时间，单位毫秒。 |
| paginationSpacing | "15px" | 分页圆点标记的间隙。 |
| paginationDiameter | "12px" | 分页圆点的直径。 |
| paginationPositionFromBottom | "20px" | 分页圆点到轮播图底部的距离。 |
| slidesClass | ".slides" | 轮播图的 class 名称。 |
| controlsClass | ".controls" | 左右控制按钮的 class 名称。 |
| paginationClass | ".pagination" | 分页圆点导航按钮的 class 名称。 |
Github 地址：https://github.com/prose100/jQuery-slider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
