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 |
该jQuery轮播图插件的github地址为:https://github.com/VeeK727/partialViewSlider
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!