spark-swiper

安装

npm install spark-swiper

它需要一些初始样式

<div class="spark-swiper">
    <div class="swiper-wrap">
        <div class="swiper-item">
            <!-- slide1 -->
        </div>
        <div class="swiper-item">
            <!-- slide2 -->
        </div>
    </div>
</div>

.spark-swiper {
  overflow: hidden;
  position: relative;
}

.swiper-wrap {
  overflow: hidden;
  position: relative;
}

.swiper-item {
  float: left;
  width: 100%;
  position: relative;
}

自定义配置选项

滑动可以选择第二个参数: [options]

参数	说明	类型	默认值
startSlide	默认的索引位置	int	0
speed	动画执行时间	int	300
auto	是否自动播放, 传入切换时间	int	-
continuous	是否循环播放	boolean	false
width	单个swipe的宽度，一般在需要预览多个swipe时使用	int	-
offset	距离左边的偏移量，一般在需要预览多个swipe时使用	int	-
disableScroll	禁用Swiper的所有触摸事件	boolean	false
stopPropagation	阻止事件冒泡	boolean	false
callback	事件回调	Function	(index, currentEl)
transitionEnd	动画完成事件	Function	(index, currentEl)
swiping	使用已刷过的全宽度的百分比（0-1）进行滑动时调用	Function	(percent)

例子

const mySwiper = new Swiper(document.querySelector('.spark-swiper'), {
  width: window.innerWidth,
  offset: 30,
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

API

spark-swiper暴露了以下可以控制滑动的API：

prev() 滑动到上一页

next() 滑动到下一页

getPos() 返回当前位置的索引

getNumSlides() 返回滑块总数量

kill() 销毁当前Swiper实例