轻量级jQuery轮播图插件partialViewSlider
源码介绍
partialViewSlider是一款轻量级jQuery轮播图插件。该jquery轮播图插件仅8k大小,响应式设计,支持移动设备,还支持多种预览模式。 在页面中引入jquery和partialviewslider.min.js文件以及partialviewslider.min.css文件。 使用无序列表作为该轮播图的HTML结构。 在页面DOM元素加载完毕之后,通过 该jQuery轮播图插件的可用配置参数有: 该jQuery轮播图插件的github地址为:https://github.com/VeeK727/partialViewSlider简要教程
使用方法
<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
<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>
初始化插件
partialViewSlider()
方法来初始化该jQuery轮播图插件。
$(document).ready(function(){
$('#partial-view').partialViewSlider();
});
配置参数
参数
类型
默认值
描述
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
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 轻量级jQuery轮播图插件partialViewSlider
发表评论 取消回复