Wondering what’s next for npm?Check out our public roadmap! »

    wallop
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/wallop package

    2.4.1 • Public • Published

    wallop

    Build Status npm version

    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.

    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, controlling what's shown or hidden with CSS.

    Examples

    I've created a collection on Codepen 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

    $ npm install wallop

    With bower

    $ bower install wallop

    Download
    You can download the latest version or checkout all the releases here.

    Usage

    Once you have downloaded Wallop, the first thing you need to do is include the CSS and the JavaScript.

    CSS

    <head>
      <link rel="stylesheet" href="path/to/wallop.css">
    </head>

    JavaScript

    <script src="path/to/Wallop.min.js"></script>
    <script>
      var wallopEl = document.querySelector('.Wallop');
      var slider = new Wallop(wallopEl);
    </script> 

    commonJS

      var Wallop = require('Wallop');

    ES6

      import Wallop from 'Wallop';

    HTML

    <div class="Wallop">
      <div class="Wallop-list">
        <div class="Wallop-item"></div>
        <div class="Wallop-item"></div>
        <div class="Wallop-item"></div>
        <div class="Wallop-item"></div>
        <div class="Wallop-item"></div>
      </div>
      <button class="Wallop-buttonPrevious">Previous</button>
      <button class="Wallop-buttonNext">Next</button>
    </div>

    #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

    <head>
      <link rel="stylesheet" href="path/to/wallop.css">
      <link rel="stylesheet" href="path/to/wallop-animation.css">
    </head>

    Extending with modifier

    <div class="Wallop Wallop--fade">
    ...
    </div>

    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! Like these guys did.

    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.

    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

    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

    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.

    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

    var slider = document.querySelector('.Wallop');
    var Wallop = new Wallop(slider);
    var handler = function(event) {
      // event.detail.wallopEl
      // => <div class="Wallop">…</div>
     
      // event.detail.currentItemIndex
      // => number
    };
     
    // Listen to the handler
    Wallop.on('change', handler);
     
    // Remove the handler listener
    Wallop.off('change', handler);

    Real life examples

    • Google – uses wallop as a slideshow, transitioning the background colour and animating the hero image of each item
    • Warp – uses the power of wallop's API and Custom Events to control the items via the URL and to build a custom pagination
    • London Housing Headlines – uses wallop to display a collection of really cool headlines about London's housing crisis 👍
    • Strava Insights – 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 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.

    Contributing

    Plese see CONTRIBUTING.md for more information.

    Licensing

    MIT © 2015 Pedro Duarte

    Install

    npm i wallop

    DownloadsWeekly Downloads

    911

    Version

    2.4.1

    License

    MIT

    Last publish

    Collaborators

    • avatar