@robust-tools/fader v0.4.1

Fader

Fader is a component that works like a slider by fading slides above one another. It's minimal abd lightweight.

Usage

Install it

npm install @robust-tools/fader

Add the HTML

<ul class="slider">
	<li class="slider__slide">
		<img
			class="slider__img"
			src="http://lorempixel.com/800/600/abstract/1"
			alt=""
			role="presentation"
		/>
		<p class="slider__title">Genuine</p>
	</li>
	<li class="slider__slide">
		<img
			class="slider__img"
			src="http://lorempixel.com/800/600/abstract/2"
			alt=""
			role="presentation"
		/>
		<p class="slider__title">Journey</p>
	</li>
	<li class="slider__slide">
		<img
			class="slider__img"
			src="http://lorempixel.com/800/600/abstract/3"
			alt=""
			role="presentation"
		/>
		<p class="slider__title">Glocal</p>
	</li>
	<li class="slider__slide">
		<img
			class="slider__img"
			src="http://lorempixel.com/800/600/abstract/4"
			alt=""
			role="presentation"
		/>
		<p class="slider__title">Inspire</p>
	</li>
</ul>

Add the CSS. According to your build process this can be imported directly into your files or you can copy it from the @robust-tools/fader/lib/css/ directory

@import '@robust-tools/fader/lib/css/fader.css';
@import '@robust-tools/fader/lib/css/animation.css';

Import it

import Fader from '@robust-tools/fader';

const myFader = new Fader(selector, options);

Options