使用方法
使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。
HTML结构
该幻灯片的基本HTML结构如下,你可以为第一个幻灯片slide添加.Wallop-item--current class。
… … … … …
初始化插件
...可用动画类型
该幻灯片可用的过渡动画类型有:
Wallop--slide
Wallop--fade
Wallop--scale
Wallop--rotate
Wallop--fold
Wallop--vertical-slide
上面是一些内置的过渡动画类型,你也可以自定义自己的过渡动画。
配置参数
下面是一些可用的配置参数:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
carousel: true
方法
Wallop幻灯片插件提供了一些基本的方法用于按钮的控制:
goTo允许跳转到指定index的幻灯片上。
next
跳转到下一个幻灯片slide。
previous
跳转到前一个幻灯片slide。
事件
下载本文
Wallop在每一次slide改变的时候都会发出一个事件,它返回一个detail对象,该对象包含当前slide的index和Wallop对象。