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

| Option | Type | Default | Details | | ----------------------- | ---------- | ------------ | ----------------------------------------------------------------------------------------------------------------------- | | wrapperClasses | string[] | ['slider'] | List of the classes will be used to create the wrapper element around the slider | | titleAnimation | string | '' | The type of animation to be used on the slide title. Available animations are: focus-in-contract-bck, text-focus-in | | transition | number | 5000 | Transition between every slide in milliseconds | | autoplay | boolean | true | Start the slider automatically | | bullets | boolean | true | Generate and display the navigation bullets | | arrows | boolean | true | Generate and display the next and previous buttons | | prevArrow | string | 'Prev' | The inner HTML of the previous button | | nextArrow | string | 'Next' | The inner HTML of the next button | | paginationInfo | boolean | false | Display the number of the active slide out of the total slides | | paginationInfoSeparator | string | out of | The text that separates the numbers of the active slide from the total slides |