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

Flexible & Mobile-first Slider with CSS3 Transitions - Wallop Slider
File Size: 44 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.