storm-slides
v0.3.5
Published
Slides/carousel/fader/slider component
Downloads
20
Readme
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/)