wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小,它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们,至于这些class样式你可以完全自定义。wallop的特点有:
- 移动优先
- 动画和过渡效果都使用CSS来生成
- 轻量级,仅4k大小
- 高度灵活性和可扩展性
- 可自定义事件和API
- 没有任何外部依赖
安装
你可以通过npm或bower来安装该幻灯片插件。
$ npm install wallop $ bower install wallop
使用方法
使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。
<link rel="stylesheet" href="path/to/wallop.css"> <script src="path/to/Wallop.min.js"></script>
HTML结构
该幻灯片的基本HTML结构如下,你可以为第一个幻灯片slide添加.Wallop-item--current
class。
<div class="Wallop"> <div class="Wallop-list"> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> <div class="Wallop-item">…</div> </div> <button class="Wallop-buttonPrevious">Previous</button> <button class="Wallop-buttonNext">Next</button> </div>
初始化插件
<script> var wallopEl = document.querySelector('.Wallop'); var slider = new Wallop(wallopEl); </script>
添加动画效果
该幻灯片插件默认是没有动画过渡效果的,如果你需要添加动画效果,需要引入相应的wallop-animation.css文件,并为元素添加Wallop--xxxx
class。例如要添加淡入淡出的效果:
<head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-fade.css"> </head>
<div class="Wallop Wallop--fade"> ... </div>
可用动画类型
该幻灯片可用的过渡动画类型有:
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的幻灯片上。
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到第二个slide(index从0开始) Wallop.goTo(1);
next
跳转到下一个幻灯片slide。
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到下一个slide Wallop.next();
previous
跳转到前一个幻灯片slide。
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); // 跳转到前一个slide Wallop.previous();
事件
Wallop在每一次slide改变的时候都会发出一个事件,它返回一个detail
对象,该对象包含当前slide的index和Wallop对象。
var slider = document.querySelector('.Wallop'); var Wallop = new Wallop(slider); Wallop.on('change', function(event) { // event.detail.wallopEl // => <div class="Wallop">…</div> // event.detail.currentItemIndex // => number });