移动优先的纯javascript幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 移动优先的纯javascript幻灯片插件
移动优先的纯javascript幻灯片插件
分享:

    插件介绍

    wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小,它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们,至于这些class样式你可以完全自定义。

    浏览器兼容性

    浏览器兼容性
    时间:08-31
    阅读:
简要教程

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
});