开源软件名称(OpenSource Name):lyfeyaj/swipe开源软件地址(OpenSource Url):https://github.com/lyfeyaj/swipe开源编程语言(OpenSource Language):JavaScript 99.0%开源软件介绍(OpenSource Introduction):Swipe
NoteThis 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! UsagePreviewThanks to @loup-brun InstallationNPMnpm i swipejs Yarnyarn add swipejs See the online example for a simple demo. Import in your projectES5const Swipe = require('swipejs'); ES6 and newerimport Swipe from 'swipejs'; MarkupSwipe 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 StyleSwipe 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;
} JavascriptYou 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. OptionsSwipe can take an optional second parameter – an object of key/value settings:
Examplewindow.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) {}
}); APIA Swipe instance exposes the following public methods:
SupportsBrowser SupportSwipe 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 SupportPlease go to react swipe plugin, or check the example Angular(V1) SupportPlease go to angular swipe plugin for source code and usage example. Who's using SwipeSend me a note if you want your logo here License |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论