Basic jQuery Content Slideshow with CSS3 Transitions - Wipe

Wipe is a simple lightweight jQuery plugin for creating a basic responsive content slideshow that supports auto-rotation and CSS3 transition based sliding animations. The plugin supports any Html elements like text, videos or inline elements, not only images.

How to use it:

1. Load jQuery javascript library and the jQuery wipe plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.wipe.js"></script> 

2. Insert your images (or other elements) in an Html unordered list.

<ul id="slideshow" class="slides">
  <li><img src="http://lorempixel.com/420/310/sports/Image 1" /></li>
  <li><img src="http://lorempixel.com/420/310/people/Image 2" /></li>
  <li><img src="http://lorempixel.com/420/310/fashion/Image 3" /></li>
</ul>

3. Essential CSS styles for the slideshow.

.slides { position: relative; }

.slides > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 310px;
  overflow: hidden;
}

.slides > li >img { width: 100%; }

4. To initialize the slideshow, simply call the plugin on the parent element.

$(document).ready(function() {
$('#slideshow').wipe();
});

5. Available options & callbacks.

<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').wipe({
currentSlideSelector: 'wipeCurrentSlide',
transitionSpeed: 1000,
pauseTime: 2000,
onSlideAdd: function() {},
onSlideRemove: function() {}
});
});
</script>

---

This awesome jQuery plugin is developed by UseAllFive. For more Advanced Usages, please check the demo page or visit the official website.