• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

lyfeyaj/swipe: Swipe is the most accurate touch slider. Support both React and A ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

lyfeyaj/swipe

开源软件地址(OpenSource Url):

https://github.com/lyfeyaj/swipe

开源编程语言(OpenSource Language):

JavaScript 99.0%

开源软件介绍(OpenSource Introduction):

Swipe

Build Status npm version npm GitHub license

Swipe is the most accurate touch slider. It is extremely lightweight (only 6kb minified) and works across all browsers, including IE8+.

Support both React.js and Angular.js(v1)

Note

This repo is a continuation of the dead Swipe project. Our mission is to keep Swipe alive and moving forward, with maintenance fixes and new features. Pull Requests are welcome!

Usage

Preview

Preview Image

Thanks to @loup-brun

Installation

NPM

npm i swipejs

Yarn

yarn add swipejs

See the online example for a simple demo.

Import in your project

ES5

const Swipe = require('swipejs');

ES6 and newer

import Swipe from 'swipejs';

Markup

Swipe requires just a few lines of markup. Here is an example:

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Above is the initial required structure– a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so:

Style

Swipe requires the following styles to be added to your stylesheet:

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

Javascript

You may initialize a Swipe slider with only one line of javascript code:

window.mySwipe = new Swipe(document.getElementById('slider'));

I always place this at the bottom of the page, externally, to verify the page is ready.

Options

Swipe can take an optional second parameter – an object of key/value settings:

Options Type Default Description
startSlide Integer 0 index position at which Swipe should start.
speed Integer 300 speed of prev and next transitions in milliseconds.
auto Integer 0 when specified, start an auto-playing slideshow (time in milliseconds between slide change).
continuous Boolean true create an infinite feel with no endpoints.
autoRestart Boolean false auto restart slideshow after user's touch event or next/prev calls.
disableScroll Boolean false prevent any touch events on this container from scrolling the page.
stopPropagation Boolean false stop event propagation.
draggable Boolean false listen to mouse events in addition to the touch events
ignore String null ignore touch events on any element matching this selector
callback Function null runs at slide change. Three parameters are passed to the function: index (the current slide index)elem (the current slide element) and dir (direction: 1 for left or backward-1 for right or forward).
transitionEnd Function null runs at the end of a slide transition. Two parameters are passed to the function: index (the current slide index) and elem (the current slide element).

Example

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 0,
  speed: 400,
  auto: 3000,
  draggable: false,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  ignore: ".scroller",
  callback: function(index, elem, dir) {},
  transitionEnd: function(index, elem) {}
});

API

A Swipe instance exposes the following public methods:

Methods Description
prev() slide to the previous slide.
next() slide to the next slide.
getPos() return the current slide index position.
getNumSlides() return the number of slides.
slide(index, duration) slide to the position matching the index (integer) (duration: speed of transition in milliseconds).
restart() restart the slideshow with autoplay.
stop() stop the slideshow and disable autoplay.
setup(options) reinitialize swipe with options.
disable() disable slideshow.
enable() enable slideshow.
kill() completely remove the Swipe instance.

Supports

Browser Support

Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch events, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

React Support

Please go to react swipe plugin, or check the example

Angular(V1) Support

Please go to angular swipe plugin for source code and usage example.

Who's using Swipe

Send me a note if you want your logo here

License

The MIT License (MIT).




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap