basicslider
v1.1.5
Published
A slider in its purest form.
Downloads
25
Readme
basicSlider
A slider in its purest form.
Contents
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:
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 |