jQuery 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:

<ul id="slideshow" class="slides">
    <li><img src="https://31.media.tumblr.com/09e35644c4d31a09ced4525bb9a2f33b/tumblr_n7os355Dfm1qz6f9yo7_r1_500.png" /></li>
    <li><img src="https://31.media.tumblr.com/fd81384196550fb0f57d912acc178728/tumblr_n7oqut2kIA1qz6f9yo1_500.jpg" /></li>
    <li><img src="https://31.media.tumblr.com/22bfddec03884732e34ab1a93384e594/tumblr_n7oog2kaVV1qz6f9yo2_500.jpg" /></li>
</ul>

$(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:

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:

//-- 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:

.slides {
    position: relative;
}
.slides>li {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.slides>li>img {
    width: 100%;
}