Node's Pocket Monsters

    basicslider

    1.1.5 • Public • Published

    basicSlider

    Donate via PayPal

    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

    Install

    npm i basicslider

    DownloadsWeekly Downloads

    26

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    39.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • electerious