Storm Slides

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/)