• Stars
    star
    221
  • Rank 179,773 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

TouchSlider是一个轻量级的javascript组件,设计的目的是提供一个可以方便实现全平台(PC及移动端触摸界面)的幻灯slider效果。

TouchSlider

pageSwitch.js 的区别
pageSwitch.js 适用场景为全屏切换,即一切一屏,并且在此基础上实现了超过一百种切换效果。而 TouchSlider.js 则侧重于在滑动效果下,不仅支持全屏切换,还支持不固定尺寸的幻灯切换。
具体使用请参看各组件所提供的示例。

Tips: v2 版为重构版,提高了代码质量,也优化了性能。参数格式有所调整,如果是由旧版本更新,则注意修改调用的参数。

无法滑动?

最新版本的 chrome 的实现了 pointer 事件,pageSwitch 会优先使用 pointer 事件,但是会和系统触摸滚动冲突。 解决该问题,可以通过对滚动容器设置 touch-action 样式来 fix。

.my-slider-container {
    touch-action: pan-y; //横向滚动时 or
    touch-action: pan-x; //纵向滑动时
}

安装

npm install touchslider

如何使用

// 如果使用webpack或者requirejs或者browserify等构建工具,可以这样:
var TouchSlider = require('touchslider');

// 也可以直接在下载本文件,直接在页面中引入

var ts = new TouchSlider('container id', {
    duration: 600, //int 页面过渡时间
    direction: 1, //int 页面切换方向,0横向,1纵向
    start: 0, //int 默认显示页面
    align: 'center', //string 对齐方式,left(top) center(middle) right(bottom)
    mouse: true, //bool 是否启用鼠标拖拽
    mousewheel: false, //bool 是否启用鼠标滚轮切换
    arrowkey: false, //bool 是否启用键盘方向切换
    fullsize: true, //bool 是否全屏幻灯(false为自由尺寸幻灯)
    autoplay: true, //bool 是否自动播放幻灯
    interval: int //bool 幻灯播放时间间隔
});

//调用方法
ts.prev(); //上一张
ts.next(); //下一张
ts.slide(n); //第n张

ts.play(); //播放幻灯
ts.pause(); //暂停幻灯

ts.prepend(DOM_NODE); //前增页面
ts.append(DOM_NODE); //后增页面
ts.insertBefore(DOM_NODE, index); //在index前添加
ts.insertAfter(DOM_NODE, index); //在index后添加
ts.remove(index); //删除第index页面
ts.isStatic(); //是否静止状态

ts.destroy(); //销毁TouchSlider效果对象

/* 事件绑定
 * event可选值:
 *
 * before 页面切换前
 * after 页面切换后
 * dragStart 开始拖拽
 * dragMove 拖拽中
 * dragEnd 结束拖拽
 */
ts.on(event, callback);

兼容性

兼容全平台,包括 IE6+

demo 地址

请点击http://github.boy.im/touchslider/index.html

More Repositories

1

pageSwitch

Just a page-Switch Javascript Library
JavaScript
411
star
2

react-animated-router

Dynamic transitions with react-router(v6) and react-transition-group
TypeScript
56
star
3

JS2CSSKeyframes

Create CSS3 keyframes animation from javascript
JavaScript
46
star
4

q-vim

my vim config. 来自一个前端开发码农的vim配置方案
Vim Script
33
star
5

react-formutil

Happy to build the forms in React ^_^
JavaScript
33
star
6

imageReady

javascript图片预加载,检测图片加载完成的组件(图片延迟加载)
JavaScript
27
star
7

storage

提供LocalStorage的本地化存储方案,支持IE(通过IE特性userData)。
JavaScript
20
star
8

chrome-extension-development

chrome扩展开发环境配置与基础功能示例
JavaScript
20
star
9

tiger-new

快速生成一个标准前端开发项目的CLI工具,支持SSR同构渲染。
JavaScript
20
star
10

water-wave

一个创建点击后产生水波纹效果的React组件
JavaScript
19
star
11

react-antd-formutil

Happy to use react-formutil in the project based on ant-design ^_^
JavaScript
16
star
12

react-easyform

A Higher Order Component to build form & input, support validators.
JavaScript
14
star
13

sketch

Just a HTML5 sketch-pad.
JavaScript
10
star
14

H5Media

Just a HTML5(video/audio) Javascript Library
JavaScript
5
star
15

cookick

A simple utilities for browser cookies APIs.
JavaScript
4
star
16

lazyload

Just a Lazyloader Javascript Library
JavaScript
3
star
17

Animation

Just a animation(tween/frame) Javascript Library
JavaScript
3
star
18

getAbsoluteUrl

获取页面中资源完整绝对的url地址 Get absolute url from relative one
JavaScript
3
star
19

history

数据(页面)浏览历史记录
JavaScript
3
star
20

ding-bot-cli

DingTalk robot messages sender
JavaScript
3
star
21

react-bootstrap-formutil

Happy to use react-formutil in the project based on react-bootstrap ^_^
JavaScript
3
star
22

COOKIE

该项目已废弃,请使用 [cookick] 代替
JavaScript
3
star
23

formatPrice

格式化金额,例如 ¥9999999- > ¥9,999,999
JavaScript
2
star
24

memo-render

A react-component for optimizing performance when it's parent re-renders.
JavaScript
2
star
25

webpack-pathed-assets-manifest-plugin

创建包含路径信息的清单文件
JavaScript
2
star
26

comments-post

Post a comment to wordpress blog from ajax
PHP
1
star
27

JSON

解析/反解析json字符串的javascript组件
JavaScript
1
star
28

CMask

Just a scratch pad(mask) Javascript Library
JavaScript
1
star
29

createClass

提供简单快速创建可维护、可扩展的(继承、重写)类的方法
JavaScript
1
star
30

babel-plugin-auto-css-modules-flag

自动识别css modules语法并做标记
JavaScript
1
star
31

touchscroll

JavaScript
1
star
32

retina

retina屏幕高清图片解决方案
JavaScript
1
star
33

react-snippets

一些react相关小组件、工具的代码集合
JavaScript
1
star
34

JPromise

Just a Promise/A+ Javascript Library
JavaScript
1
star