轻量级滑块Swiper插件发布(原生js,仅3kb)
栏目: JavaScript · 发布时间: 5年前
内容简介:专注于移动端、轻量级Swiper原生插件(3kb gziped)。触摸事件基于element,不影响页面的触摸事件(如右滑返回上一页)重构于Swipe,实现自定义swipe宽度、偏移量、无限轮播、事件复制等功能,体验更加流畅
专注于移动端、轻量级Swiper原生插件(3kb gziped)。触摸事件基于element,不影响页面的触摸事件(如右滑返回上一页)
重构于Swipe,实现自定义swipe宽度、偏移量、无限轮播、事件复制等功能,体验更加流畅
如果觉得有用的话,欢迎star~
预览
安装
npm install light-swiper // or yarn add light-swiper 复制代码
用法
light-swiper只需要遵循简单的布局模式,如:
<div class="light-swiper"> <div class="swiper-wrap"> <div class="swipe-item"></div> <div class="swipe-item"></div> <div class="swipe-item"></div> <div class="swipe-item"></div> </div> </div> 复制代码
以上是最初需要的结构:一系列元素包裹在两个容器中。 在每个swipe-item可以自定义你想要的内容。初始化Swiper只需简单一行代码,传入swiper的最外层DOM即可,如下所示:
import Swiper from 'light-swiper' const mySwiper = new Swiper(document.querySelector('.light-swiper')); 复制代码
除此之外,还需要一些简单的CSS样式:
.light-swiper { overflow: hidden; position: relative; } .swiper-wrap { overflow: hidden; position: relative; } .swipe-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('.light-swiper'), { width: 310, offset: 30, startSlide: 2, speed: 400, auto: 3000, continuous: true, disableScroll: false, stopPropagation: false, callback: function(index, elem) {}, transitionEnd: function(index, elem) {} }); 复制代码
API
light-swiper暴露了以下可以控制滑动的API:
prev()
滑动到上一页
next()
滑动到下一页
getPos()
返回当前位置的索引
getNumSlides()
返回滑块总数量
kill()
销毁当前Swiper实例
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。