Flexible & Mobile-first Slider with CSS3 Transitions - Wallop Slider

Wallop Slider is a flexible, mobile-first, multi-purpose image slider with amazing transition animations based on CSS3.

Features:

• Lightweight(~7kb unminified) and easy to implement.
• Responsive design for both mobile and desktop.
• A basic API to control the slider from your own buttons or gestures.
• Vertical or horizontal sliding.
• Custom events supported.
• Multiple sliders on one page.
• Modular CSS which allows you create & control many types of transition animations like rotate, fade, flip, fold, scale, and much more.

More Examples:

• With Fold Animation
• With 3D Animation
• With Rotate Animation
• goTo API
• Custom events

Basic Usage:

1. Load the required CSS file in the head section of your page.

<link rel="stylesheet" href="css/all.css">

2. Create an image slider with CSS3 fold animation and next/prev controls.

<div class="photo-slider wallop-slider wallop-slider--fold">
<ul class="wallop-slider__list">
<li class="wallop-slider__item wallop-slider__item--current"><img src="1.jpg"></li>
<li class="wallop-slider__item"><img src="2.jpg"></li>
<li class="wallop-slider__item"><img src="3.jpg"></li>
<li class="wallop-slider__item"><img src="4.jpg"></li>
<li class="wallop-slider__item"><img src="5.jpg"></li>
</ul>
<button class="wallop-slider__btn wallop-slider__btn--previous btn btn--previous" disabled="disabled">Previous</button>
<button class="wallop-slider__btn wallop-slider__btn--next btn btn--next">Next</button>
</div>

3. Load the WallopSlider.js at the end of the document.

<script src="scripts/WallopSlider.js"></script> 

4. Initialize the slider with a little bit javascript codes.

(function() {
'use strict';
var photoSlider = new WallopSlider('.photo-slider');

})();

---

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