幻灯片/轮播

PartialViewSlider轻量级jQuery轮播图插件

阿里云

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="dist/partialviewslider.min.css">                    
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/partialviewslider.min.js"></script>

HTML 代码:

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

  1. <ul id="partial-view">
  2.   <li>
  3.     <img src="src/img/img1.jpeg" />
  4.   </li>
  5.   <li>
  6.     <img src="src/img/img2.jpeg" />
  7.   </li>
  8.   <li>
  9.     <img src="src/img/img3.jpg" />
  10.   </li>
  11. </ul>

初始化插件:

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

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

配置参数:

参数 类型 默认值 描述
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

PartialViewSlider 轻量级 jQuery 轮播图插件

已有 693 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(3)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!