Basic jQuery Content Slideshow with CSS3 Transitions - Wipe

File Size: 10 KB
Views Total: 2491
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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=" 1" /></li>
  <li><img src=" 2" /></li>
  <li><img src=" 3" /></li>

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() {

5. Available options & callbacks.

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

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