electerious/basicSlider

A slider in its purest form.

basicSlider

A slider in its purest form.

Contents

• Demos
• Features
• Requirements
• Setup
• API
• Instance API
• Options
• Themes

Demos

Name	Description	Link
Default	All features with the default theme.	Try it on CodePen
Responsive	Responsive slider with dynamic content.	Try it on CodePen
Emoji	Default theme with emojis.	Try it on CodePen
Touch	Slider with swipe support.	Try it on CodePen

Features

• Works in all modern browsers and IE11 (with polyfills)
• Supports any kind of content
• No fancy shit, just a slider in its purest form
• Zero dependencies
• CommonJS and AMD support
• Simple JS API

Requirements

basicSlider depends on the following browser APIs:

• Node​List​.prototype​.for​Each
• Number.isFinite
• Object.assign

Some of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.

Setup

We recommend installing basicSlider using npm or yarn.

npm install basicslider

yarn add basicslider

Include the CSS file in the head tag and the JS file at the end of your body tag…

<link rel="stylesheet" href="dist/basicSlider.min.css">
<link rel="stylesheet" href="dist/themes/default.min.css">

<script src="dist/basicSlider.min.js"></script>

…or skip the JS file and use basicSlider as a module:

const basicSlider = require('basicslider')

import * as basicSlider from 'basicslider'

API

.create(elem, slides, opts)

Creates a new basicSlider instance.

Be sure to assign your instance to a variable. Using your instance, you can…

• …get the current slide.
• …navigate back and forward.
• …goto a specific slide.

Examples:

const instance = basicSlider.create(document.querySelector('#slider'), [
	'Slide 1',
	'Slide 2',
	'Slide 3'
])

const instance = basicSlider.create(document.querySelector('#slider'), [
	'<p>Slide 1 with HTML</p>',
	'<p>Slide 2 with HTML</p>',
	'<p>Slide 3 with HTML</p>'
], {
	index: 1,
	arrows: false
})

Parameters:

• elem {Node} The DOM element/node which should contain the slider.
• slides {Array} Array of strings. Each item represents one slide. Any kind of HTML is allowed.
• opts {?Object} An object of options.

Returns:

• {Object} The created instance.

Instance API

Each basicSlider instance has a handful of handy functions. Below are all of them along with a short description.

.element()

Returns the DOM element/node object associated with the instance.

Example:

const elem = instance.element()

Returns:

• {Node} DOM element/node associated with the instance.

.length()

Returns the total number of slides.

Example:

const length = instance.length()

Returns:

• {Number} Total number of slides.

.current()

Returns the current slide index.

Example:

const current = instance.current()

Returns:

• {Number} Current slide index.

.goto(newIndex)

Navigates to a slide by index and executes the beforeChange and afterChange callback functions.

Example:

instance.goto(0)

Parameters:

• newIndex {Number} Index of the slide to be displayed.

.prev()

Navigates to the previous slide and executes the beforeChange and afterChange callback functions.

Example:

instance.prev()

.next()

Navigates to the next slide and executes the beforeChange and afterChange callback functions.

Example:

instance.next()

Options

The option object can include the following properties:

{
	/*
	 * Initial slide.
	 */
	index: 0,
	/*
	 * Show or hide prev/next arrows.
	 */
	arrows: true,
	/*
	 * Show or hide dot indicators.
	 */
	dots: true,
	/*
	 * Callback functions.
	 * Returning false will stop the caller function and prevent the slider from changing.
	 */
	beforeChange: (instance, newIndex, oldIndex) => {},
	afterChange: (instance, newIndex, oldIndex) => {}
}

Themes

Layout and theme are separated CSS files. This makes it easy to style your own slider or to choose from the included themes.

Name	Demo
Default theme	Demo