Narcoleptic's Patch Mangler
    Wondering what’s next for npm?Check out our public roadmap! »

    storm-slides

    0.3.5 • Public • Published

    Storm Slides

    npm version

    Slides/carousel/fader/slider component. Accessible, lazy-loading image content, multi-panel content area with between-slide transitions.

    Example

    https://stormid.github.io/storm-slides

    Usage

    HTML

    <div class="js-slides">
        <div class="js-slides__list">
            <div class="js-slides__item">
                <img data-src="http://lorempixel.com/400/200">
            </div>
            <div class="js-slides__item">
                <img data-src="http://lorempixel.com/400/200">
            </div>
            <div class="js-slides__item">
                <img data-src="http://lorempixel.com/400/200">
            </div>
            <div class="js-slides__item">
                <img data-src="http://lorempixel.com/400/200">
            </div>
        </div>
        <button class="js-slides__previous">Previous</button>
        <button class="js-slides__next">Next</button>
        <ul>
            <li><button class="js-slides__nav-item">1</button></li>
            <li><button class="js-slides__nav-item">2</button></li>
            <li><button class="js-slides__nav-item">3</button></li>
            <li><button class="js-slides__nav-item">4</button><li>
        </ul>
        <div aria-live="polite" aria-atomic="true" class="visuallyhidden js-slides__liveregion"></div>
    </div>
    

    JS

    npm i -S storm-slides
    

    either using es6 import

    import Slides from 'storm-slides';
    
    Slides.init('.js-slides');
    

    asynchronous browser loading (use the .standalone version in the /dist folder) using the global name (Storm + capitalised package name)

    import Load from 'storm-load';
    
    Load('{{path}}/storm-slides.standalone.js')
        .then(() => {
            StormSlides.init('.js-slides');
        });
    

    CSS Basic CSS to support fading transition

    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .js-slides {
        position: relative;
    }
    .js-slides__list {
        position: relative;
        overflow: hidden;
    }
    .js-slides__item {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .js-slides__item.is--current {
        visibility: visible;
        position: relative;
    }
    .js-slides__item.hide--previous,
    .js-slides__item.hide--next {
      visibility: visible;
      z-index: 2;
      -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    }
    
    @-webkit-keyframes fadeOut {
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
    @-moz-keyframes fadeOut {
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
    @-ms-keyframes fadeOut {
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
    @keyframes fadeOut {
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
    

    Options

    {
        callback: null,
        autoPlay: bool,//not recommended for accessibilityå
        slideDuration: int (duration in seconds, default is 5)
    }
    

    e.g.

    Slides.init('.js-selector', {
        callback(){
            console.log(this);
        },
        autoPlay: true,
        slideDuration: 3
    });
    

    Tests

    npm run test
    

    Browser support

    This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

    The es5 version depends upon Object.assign so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfills for Array functions and eventListeners.

    Dependencies

    None

    License

    MIT

    Credits

    Redeveloped from an initial fork of Wallop(https://github.com/peduarte/wallop/)

    Install

    npm i storm-slides

    DownloadsWeekly Downloads

    2

    Version

    0.3.5

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar