轻量级滑块Swiper插件发布(原生js,仅3kb)

栏目: JavaScript · 发布时间: 5年前

内容简介:专注于移动端、轻量级Swiper原生插件(3kb gziped)。触摸事件基于element,不影响页面的触摸事件(如右滑返回上一页)重构于Swipe,实现自定义swipe宽度、偏移量、无限轮播、事件复制等功能,体验更加流畅

专注于移动端、轻量级Swiper原生插件(3kb gziped)。触摸事件基于element,不影响页面的触摸事件(如右滑返回上一页)

重构于Swipe,实现自定义swipe宽度、偏移量、无限轮播、事件复制等功能,体验更加流畅

Git仓库

如果觉得有用的话,欢迎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实例


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

村落效应

村落效应

[加] 苏珊·平克(Susan Pinker) / 青涂 / 浙江人民出版社 / 2017-3-1 / CNY 69.90

 面对面的接触是作为社会性动物的人类最古老、深刻的需求。在互联网时代,社交媒体已经成为人际沟通的主体,人际关系的维系越来越被社交媒体上的点赞、转发、评论代替,在冰冷的互动中,我们失去了真实与温度。面对面的人际关系与接触能让人感受到如村落生活般的归属感,它是一个人免疫力、复原力和影响力的真正来源。虽然互联网拥有毋庸置疑的优势,但是如果我们渴望快乐、健康、长寿……没错,还有智慧,我们就需要想方设法腾......一起来看看 《村落效应》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具