Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peduarte/wallop
:no_entry: currently unmaintained :no_entry: A minimal JS library for showing & hiding things
https://github.com/peduarte/wallop
animation css minimal slider
Last synced: 23 days ago
JSON representation
:no_entry: currently unmaintained :no_entry: A minimal JS library for showing & hiding things
- Host: GitHub
- URL: https://github.com/peduarte/wallop
- Owner: peduarte
- Created: 2013-10-17T20:06:15.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-04-21T18:08:04.000Z (over 4 years ago)
- Last Synced: 2024-10-01T11:23:13.586Z (about 1 month ago)
- Topics: animation, css, minimal, slider
- Language: CSS
- Homepage:
- Size: 6.82 MB
- Stars: 1,100
- Watchers: 33
- Forks: 80
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- Awesome-CSS-Resources - wallop:
README
# wallop
[](https://travis-ci.org/peduarte/wallop) [](http://badge.fury.io/js/wallop)
### Much more than just a slider
wallop is a minimal 4kb library for showing & hiding things.
> ❗️**Important note**️
> Version 1 of *WallopSlider* is not compatible with version 2+.
> If you are still using v1, please note that I am no longer supporting it.
> Documentation, etc. has been moved to [this branch](https://github.com/peduarte/wallop/tree/v1).
## About
In a nutshell, wallop takes a collection of HTML elements and Previous & Next buttons, and adds helper HTML classes in the correct elements based on whether you want to navigate forwards or backwards.
It basically just add the right classes in the right places at the right time.
With those classes, you can do an infinite [number of things](#real-life-examples), controlling what's shown or hidden with CSS.
## Examples
- [Basic](http://codepen.io/peduarte/pen/pjzYpG) – This is wallop's most basic implementation
- [Fade animation](http://codepen.io/peduarte/pen/RWbORJ) – Using one of the [available animations](#adding-animations)
- [Custom pagination](http://codepen.io/peduarte/pen/bVbZLK) – Create your own pagination by levaragin the power of wallops' API and CustomEvents
I've created a collection on **[Codepen](http://codepen.io/collection/DQWmxZ/)** with a few more examples, go take a 👀!
## Benefits
- Mobile first
- Progressive enhancement
- Transitions/Animations are all in CSS
- Minimal JavaScript
- Flexible & Scalable
- Custom events and API available
- 4KB minified
- Dependency free
## Install
With npm
```bash
$ npm install wallop
```
With bower
```bash
$ bower install wallop
```
Download
You can download the latest version or checkout all the releases [here](https://github.com/peduarte/wallop/releases).
## Usage
Once you have downloaded Wallop, the first thing you need to do is include the CSS and the JavaScript.
### CSS
```html
```
### JavaScript
```html
var wallopEl = document.querySelector('.Wallop');
var slider = new Wallop(wallopEl);
```
### commonJS
```js
var Wallop = require('Wallop');
```
### ES6
```js
import Wallop from 'Wallop';
```
### HTML
```html
…
…
…
…
…
Previous
Next
```
>**#protip**
>You can set the starting slide with a `.Wallop-item--current` class.
## Adding animations
Wallop has no animations by default, so if you want to animate the slides, you need to extend the default `.Wallop` class with an animation modifier and include the respective CSS into your HTML.
I have created a few basic animations which are ready for you to use out-of-the-box, you will find them in the `/css` directory.
### Including animation CSS
```html
```
### Extending with modifier
```html
...
```
### Available animations
Here's a list of the available animation modifiers ready for you to use
- `Wallop--slide`
- `Wallop--fade`
- `Wallop--scale`
- `Wallop--rotate`
- `Wallop--fold`
- `Wallop--vertical-slide`
> **protip**
> These animation helpers are especially helpful using if you are using wallop as a slider, but don't feel forced to use them, instead, feel free to take advantage of the classes wallop provides you with, and create you own!
## Options
Here's a list of options you can pass to Wallop
- `buttonPreviousClass: 'Wallop-buttonPrevious'`
- `buttonNextClass: 'Wallop-buttonNext'`
- `itemClass: 'Wallop-item'`
- `currentItemClass: 'Wallop-item--current'`
- `showPreviousClass: 'Wallop-item--showPrevious'`
- `showNextClass: 'Wallop-item--showNext'`
- `hidePreviousClass: 'Wallop-item--hidePrevious'`
- `hideNextClass: 'Wallop-item--hideNext'`
- `carousel: true`
## API
Wallop offers a basic API for you to use, so you can control it from your own buttons or gestures.
### goTo(index)
This allows you to go to a specific slide index.
```js
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// Go to 2nd slide
Wallop.goTo(1);
```
> **#protip**
> index starts at 0 👌
### next()
This allows you to go to the next slide
```js
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// Go to next slide
Wallop.next();
```
### previous()
This allows you to go to the previous slide
```js
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// Go to previous slide
Wallop.previous();
```
### reset()
This resets all internal variables of Wallop. Useful when dynamically changing the
number of items in your slider.
```js
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// Some function that will dynamically
// insert new itmes in Wallop
insertNewItems();
// Reset config
Wallop.reset();
```
## Events
Wallop dispatches a Custom Event every time a slide changes, and it returns a `detail` object which contains the current slide index and the element you initiated Wallop with.
### Listening to a slide change
```js
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
var handler = function(event) {
// event.detail.wallopEl
// =>
…
// event.detail.currentItemIndex
// => number
};
// Listen to the handler
Wallop.on('change', handler);
// Remove the handler listener
Wallop.off('change', handler);
```
## Real life examples
- **[Google](http://www.google.com/trends/worldcup)** – uses wallop as a slideshow, transitioning the background colour and animating the hero image of each item
- **[Warp](http://warp.net/news/afx-following-global-premieres-you-can-now-hear-4-tracks-from-the-ep/?o=gallery&index=0)** – uses the power of wallop's API and Custom Events to control the items via the URL and to build a custom pagination
- **[Strava Insights](http://insights.strava.com/)** – uses wallop a a slideshow, transitioning and transforming the background images with delay
If you are using wallop, please do let me know by [creating an issue](https://github.com/peduarte/wallop/issues) and I'll make sure to add it to this list 👊
## Limitations
Due to its simplicity, wallop has a few limitations. For example, it is not possible to have the slide position animation based on gesture, or it's not possible to include physics based animations based on gesture momentum.
If you want a slider which provides all these options, I highly recommend David Desandro's [Flickity](http://flickity.metafizzy.co/).
## Contributing
Plese see [CONTRIBUTING.md](https://github.com/peduarte/wallop/blob/master/CONTRIBUTING.md) for more information.
## Licensing
MIT © 2018 [Pedro Duarte](http://pedroduarte.me)