轻量级jQuery轮播图插件partialViewSlider_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

partialViewSlider是一款轻量级jQuery轮播图插件。该jquery轮播图插件仅8k大小，响应式设计，支持移动设备，还支持多种预览模式。

使用方法

在页面中引入jquery和partialviewslider.min.js文件以及partialviewslider.min.css文件。

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

HTML

使用无序列表作为该轮播图的HTML结构。

<ul id="partial-view">
  <li>
    <img src="src/img/img1.jpeg" />
  </li>
  <li>
    <img src="src/img/img2.jpeg" />
  </li>
  <li>
    <img src="src/img/img3.jpg" />
  </li>
</ul>

初始化插件

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

$(document).ready(function(){
  $('#partial-view').partialViewSlider();
});

配置参数

该jQuery轮播图插件的可用配置参数有：

参数	类型	默认值	描述
width	int	70	中间显示的图片的宽度。
controls	boolean	true	是否显示左右箭头按钮。
controlsPosition	string	inside	inside：在轮播图内部显示箭头按钮。outside ：在轮播图外部显示箭头按钮。neighbors：箭头按钮放置在容器之外。
backdrop	boolean	true	左右两侧是否显示遮罩层。
dots	boolean	false	是否在底部显示圆点按钮。
auto	boolean	true	是否自动播放。
transitionSpeed	int	400	轮播图切换的时间。单位毫秒。
delay	int	4000	过渡的延迟时间。
pauseOnHover	boolean	true	鼠标经过时是否暂停轮播图播放。
keyboard	boolean	true	是否可以使用键盘的左右箭头键控制轮播图。
perspective	boolean	false	Enable this to make adjoining slides smaller giving a perspective carousel look
prevHtml	string	<i class="material-icons">chevron_left</i>	向左箭头按钮的html
nextHtml	string	<i class="material-icons">chevron_right</i>	向右箭头按钮的html