{"id":13601880,"url":"https://github.com/lyfeyaj/Swipe","last_synced_at":"2025-04-11T04:31:50.656Z","repository":{"id":26828912,"uuid":"30288142","full_name":"lyfeyaj/swipe","owner":"lyfeyaj","description":"Swipe is the most accurate touch slider. Support both React and Angular.","archived":false,"fork":false,"pushed_at":"2023-10-17T02:03:41.000Z","size":2164,"stargazers_count":965,"open_issues_count":29,"forks_count":186,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-11-06T14:59:49.118Z","etag":null,"topics":["angular","mobile","react","slide","swipe"],"latest_commit_sha":null,"homepage":"https://swipe.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyfeyaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-02-04T08:05:18.000Z","updated_at":"2024-10-07T19:40:22.000Z","dependencies_parsed_at":"2024-01-16T23:26:46.188Z","dependency_job_id":"31c9ac54-4c3b-485f-9535-b0d5ddc6bead","html_url":"https://github.com/lyfeyaj/swipe","commit_stats":{"total_commits":468,"total_committers":59,"mean_commits":7.932203389830509,"dds":0.655982905982906,"last_synced_commit":"ecf92a8943371fb50673e216e5077cd124a6e260"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyfeyaj%2Fswipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyfeyaj%2Fswipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyfeyaj%2Fswipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyfeyaj%2Fswipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyfeyaj","download_url":"https://codeload.github.com/lyfeyaj/swipe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223458678,"owners_count":17148502,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","mobile","react","slide","swipe"],"created_at":"2024-08-01T18:01:09.366Z","updated_at":"2024-11-07T04:32:02.934Z","avatar_url":"https://github.com/lyfeyaj.png","language":"JavaScript","readme":"Swipe\n=====\n\n[![Build Status](https://travis-ci.org/lyfeyaj/swipe.svg?branch=master)](https://travis-ci.org/lyfeyaj/swipe)\n[![npm version](https://badge.fury.io/js/swipejs.svg)](https://badge.fury.io/js/swipejs)\n[![npm](https://img.shields.io/npm/dt/swipejs.svg)]()\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/lyfeyaj/swipe/master/LICENSE.md)\n\n\n\u003e Swipe is the most accurate touch slider. It is extremely lightweight (only 6kb minified) and works across all browsers, including IE8+.\n\n\u003e Support both React.js and Angular.js(v1)\n\n## Note\n\nThis repo is a continuation of the dead [Swipe](https://github.com/thebird/Swipe) project. Our mission is to keep Swipe alive and moving forward, with maintenance fixes and new features. Pull Requests are welcome!\n\n## Usage\n\n### Preview\n\n[![Preview Image](docs/images/preview.png)](https://swipe.js.org)\n\nThanks to [@loup-brun](https://github.com/loup-brun)\n\n### Installation\n\n#### NPM\n```bash\nnpm i swipejs\n```\n\n#### Yarn\n```bash\nyarn add swipejs\n```\n\nSee the [online example](https://swipe.js.org) for a simple demo.\n\n### Import in your project\n\n#### ES5\n\n``` js\nconst Swipe = require('swipejs');\n```\n\n#### ES6 and newer\n\n``` js\nimport Swipe from 'swipejs';\n```\n\n### Markup\n\nSwipe requires just a few lines of markup. Here is an example:\n\n``` html\n\u003cdiv id=\"slider\" class=\"swipe\"\u003e\n  \u003cdiv class=\"swipe-wrap\"\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nAbove 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:\n\n### Style\n\nSwipe requires the following styles to be added to your stylesheet:\n\n``` css\n.swipe {\n  overflow: hidden;\n  visibility: hidden;\n  position: relative;\n}\n.swipe-wrap {\n  overflow: hidden;\n  position: relative;\n}\n.swipe-wrap \u003e div {\n  float: left;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n```\n\n### Javascript\n\nYou may initialize a Swipe slider with only one line of javascript code:\n\n``` js\nwindow.mySwipe = new Swipe(document.getElementById('slider'));\n```\n\nI always place this at the bottom of the page, externally, to verify the page is ready.\n\n## Options\n\nSwipe can take an optional second parameter – an object of key/value settings:\n\n| Options             | Type     | Default | Description                                                                                                                                                                                                      |\n|---------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **startSlide**      | Integer  | 0       | index position at which Swipe should start.                                                                                                                                                                      |\n| **speed**           | Integer  | 300     | speed of prev and next transitions in milliseconds.                                                                                                                                                              |\n| **auto**            | Integer  | 0       | when specified, start an auto-playing slideshow (time in milliseconds between slide change).                                                                                                                     |\n| **continuous**      | Boolean  | true    | create an infinite feel with no endpoints.                                                                                                                                                                       |\n| **autoRestart**     | Boolean  | false   | auto restart slideshow after user's touch event or next/prev calls.                                                                                                                                              |\n| **disableScroll**   | Boolean  | false   | prevent any touch events on this container from scrolling the page.                                                                                                                                              |\n| **stopPropagation** | Boolean  | false   | stop event propagation.                                                                                                                                                                                          |\n| **draggable**       | Boolean  | false   | listen to mouse events in addition to the touch events |\n| **ignore**          | String   | null    | ignore touch events on any element matching this selector |\n| **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). |\n| **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).                                                      |\n\n### Example\n\n``` js\nwindow.mySwipe = new Swipe(document.getElementById('slider'), {\n  startSlide: 0,\n  speed: 400,\n  auto: 3000,\n  draggable: false,\n  continuous: true,\n  disableScroll: false,\n  stopPropagation: false,\n  ignore: \".scroller\",\n  callback: function(index, elem, dir) {},\n  transitionEnd: function(index, elem) {}\n});\n```\n\n## API\n\nA Swipe instance exposes the following public methods:\n\n| Methods                  | Description                                                                                             |\n|--------------------------|---------------------------------------------------------------------------------------------------------|\n| `prev()`                 | slide to the previous slide.                                                                            |\n| `next()`                 | slide to the next slide.                                                                                |\n| `getPos()`               | return the current slide index position.                                                                |\n| `getNumSlides()`         | return the number of slides.                                                                            |\n| `slide(index, duration)` | slide to the position matching the `index` (integer) (`duration`: speed of transition in milliseconds). |\n| `restart()`              | restart the slideshow with autoplay.                                                                    |\n| `stop()`                 | stop the slideshow and disable autoplay.                                                                |\n| `setup(options)`         | reinitialize swipe with options.                                                                        |\n| `disable()`              | disable slideshow.                                                                                      |\n| `enable()`               | enable slideshow.                                                                                       |\n| `kill()`                 | completely remove the Swipe instance.                                                                   |\n\n## Supports\n\n### Browser Support\n\nSwipe 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.\n\n### React Support\n\nPlease go to [react swipe plugin](react), or check the [example](docs/examples/react)\n\n### Angular(V1) Support\n\nPlease go to [angular swipe plugin](https://swipe.js.org/examples/angular-v1) for source code and usage example.\n\n## Who's using Swipe\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/airbnb.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/nhl.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/htc.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/thinkgeek.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/snapguide.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/everlane.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/boqii.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003cimg src=\"docs/icons/allbeauty.png\" width=\"170px\" height=\"80px\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nSend me a [note](mailto:lyfeyaj@gmail.com) if you want your logo here\n\n## License\n\n[The MIT License (MIT)](http://opensource.org/licenses/MIT).\n","funding_links":[],"categories":["Web 前端"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyfeyaj%2FSwipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyfeyaj%2FSwipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyfeyaj%2FSwipe/lists"}