Skidder响应式全屏横向排列无限轮播幻灯片插件

Skidder响应式全屏横向排列无限轮播幻灯片插件.jpg


自动将图片居中对齐,组成首尾相接的一组图片,通过导航按钮或移动触摸滑动来前后切换图片。


它的特点还有:

图片自动居中对齐。

无限循环轮播。

响应式设计,图片自动适应窗口大小。

可以在移动设备上触摸滑动。

兼容IE8+的IE浏览器。


配置参数

Skidder旋转木马插件的配置参数如下:

参数 描述
slideClass slide元素的class名称。默认为".slide"
animationType该插件支持CSS动画和jQuery动画。可选值为: 'animate', 'css'。默认值为 'animate'
lazyLoad 懒加载,默认值为false
lazyLoadAutoInit默认值为true
lazyLoadWindow 默认值为1
scaleSlides是否根据maxWidth, maxHeight和scaleTo参数缩放slide为统一的值。默认为true。
scaleTo 定义缩放模式。有2种模式:最小模式和响应式模式。可选值为:"smallest"和[x, y]。"smallest"表示高度最小的图片绝对幻灯片的高度。[x, y]表示使用一个数组中的两个数值来定义幻灯片的比例。默认为"smallest"模式。
maxWidth现在幻灯片的最大宽度,0或"none"表示不限制。默认为800
maxHeight 现在幻灯片的最大高度,0或"none"表示不限制。默认为500
preservePortrait在响应式模式中该参数有效。决定小于比例的图片的填充模式。true表示适应视口高度,水平方向上留空白。默认为false。
paging 设置为true时,插件会查找pagingElement元素的包裹元素pagingWrapper来设置padding。如果这两个元素不存在,插件会自动创建它们。默认为true。
pagingWrapper分页圆点的包裹元素,默认为'.skidder-pager'
pagingElement 分页圆点元素,默认为'.skidder-pager-dot'
swiping是否在移动触摸设备上允许swiping。默认为true
leftaligned 如果不希望幻灯片居中,设置为true,默认为false
cycle是否循环显示,默认为true。
jumpback 在非循环模式时,最后一张幻灯片会显示'return to first slide'箭头。默认为false
speed过渡动画的速度,默认为400
autoplay 是否总播放,默认为false
autoplayResume是否在互动后恢复自动播放,默认为false
interval 自动播放的时间间隔,默认为4000
transition过渡动画效果,'slide' 或 'fade'
directionClasses 在过渡动画结束后为slides添加 'left-from-active' 和 'right-from-active' class类。
afterSliding旋转木马改变后的回调函数
afterInit 旋转木马初始化后的回调函数
afterResize旋转木马尺寸改变时的回调函数

skidder旋转木马插件的github地址为:https://github.com/null2/skidder

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值