simple-css-slider v1.0.1

Simple CSS Slider

A versatile picture slider plugin.

Simple CSS Slider is built in vanilla JavaScript, independent of any libraries or frameworks. This slider utilizes CSS3 animations and is therefore only recommended for use in modern browsers and mobile platforms.

Browser Support

• Chrome 31+
• Firefox 34+
• Edge 13+
• IE10+
• Safari 7.1+
• Opera 26+
• Mobile

The Markup

The required minimum markup uses an unordered list structure:

<div id="simple-css-slider" class="simple-css-slider">
	<ul>
		<li>some content goes here</li>
		<li>more content goes here</li>
		<li>I think y'know by now...</li>
	</ul>
</div>

Initialization

Initializing the plugin is easy:

const slider = new _s(selector [, options]);

• The selector argument above may be any valid CSS selector, including IDs, classes, tags, etc.
• This slider utilizes document.querySelector(), so only the first DOM element matching the given selector will be initiated.
• The options argument is an object controlling various customization options for implementation.
• If the options argument is absent, default values will be applied.

The 'Options' Parameter

Default values are listed below:

const options = {
	animation: 'slide',
	autoPlay: true,
	controls: true,
	delay: 6000,
	duration: 400,
	easing: 'ease',
	indicators: true,
	complete: () => {}
}

Acceptable values for the properties above include...

• animation: 'slide', 'fade'
• autoPlay: true, false => note: if autoPlay is set to false, the controls are automatically enabled
• controls: true, false => left/right arrows
• delay: any valid number => the time lapse between rotations in ms
• duration: any valid number => the duration of each rotation/animation in ms
• easing: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', any valid cubic-bezier curve as a string
• indicators: true, false => pagination 'dots'
• complete: any valid function => callback invoked after each rotation has completed

Mobile-Friendly

The script automatically applies a fluid responsive layout to accommodate any screen size.