https://github.com/useallfive/wipe
A simple jQuery CSS Slideshow for wiping between frames.
https://github.com/useallfive/wipe
Last synced: about 1 year ago
JSON representation
A simple jQuery CSS Slideshow for wiping between frames.
- Host: GitHub
- URL: https://github.com/useallfive/wipe
- Owner: UseAllFive
- Created: 2014-05-21T01:20:50.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2014-06-24T19:24:49.000Z (almost 12 years ago)
- Last Synced: 2024-12-20T07:07:38.826Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 398 KB
- Stars: 3
- Watchers: 23
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Wipe [](https://travis-ci.org/UseAllFive/wipe)
A simple jQuery CSS Slideshow for wiping between frames.
#### Features:
- Works with responsive content
- It doesn’t care about the content; can contain images, videos, text, etc.
- Works on Chrome, Safari, iOS, Android Chrome, IE10
- Uses CSS3 transitions
- Older browsers will still see the slides advance at the interval (tested in IE9)
- Works best when all of the slides have the same height
#### Getting Started:
``` HTML
```
``` javascript
$(document).ready(function() {
var slideshow;
//-- Takes an optional options variable
slideshow = $('#slideshow').wipe(opts);
//-- Set up previous and next click events:
$('.prev').click(function(event) {
event.preventDefault();
slideshow.prev();
});
$('.next').click(function(event) {
event.preventDefault();
slideshow.next();
});
});
```
#### Options:
``` javascript
var opts = {
//-- Class name that is added to the current visible slide:
currentSlideSelector: 'wipeCurrentSlide',
//-- How long the slide transition is, in milliseconds:
transitionSpeed: 1000,
//-- How long a slide is paused for, in milliseconds:
pauseTime: 2000,
//-- Called when slide appears, returns the slide $el:
onSlideAdd: function() {},
//-- Called after the slide hides, returns the slide $el:
onSlideRemove: function() {}
}
```
#### Public Methods:
``` javascript
//-- Advance to the next slide
next()
//-- Pause the slideshow; hit start() to resume.
pause()
//-- Retreat to the previous slide
prev()
//-- Starts the slideshow
// Hits the next() function at the specified interval
start()
//-- Stops the slides from animating, and unbinds the attached events.
// Useful in single page backbone apps, where you need to remove
// and destroy things without causing a memory leak.
terminate()
```
#### CSS — this will get you started:
``` css
.slides {
position: relative;
}
.slides>li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.slides>li>img {
width: 100%;
}
```