WordPress Slider Plugin

And that is what this plugin is all about. Instead of developing alongside of WordPress we do it with WordPress.

This symbiosis results in a handy, full configurable solution which benefits from the advantages of the WordPress gallery (linking, captions, columns, …) and extends it with a future ready slider.

  • No frameworks required
  • Responsive (resize your browser)
  • Mobile (Swipe)
  • Animation by CSS3 transition
  • + Keyboard support
  • + Use js standalone (for your custom sliders)

Source code and installation instructions see on our GitHub.

Long story short: Demos are what we want. Here is a small selection of possible slider adjustments.

Default configuration

Gallery settings are not default:

  • no link
  • 1 column
  • random order
  • large (image) size.

Navigation

… aka next and previous buttons.

Slideshow

Auto slide after defined time.

E.g. ‘7500’ (in milliseconds)

Dimension: ratio

A colon indicates a ratio.

E.g. ’22:7′

Dimension: fixed

An x between two values indicates an exact size.

E.g. ‘400×300’ or ‘400×75%’

As long the width isn’t in % and the height isn’t in px it is always converted to a ratio to keep it responsive.

Columns

(WordPress’ gallery setting)

Display more than one slide at once.

Interaction

Get your slider:

// by ID
var mySlider = document.getElementById( 'my-slider' );

// by HTML class (or any other method)
var mySlider = document.getElementsByClassName( 'my-slider' )[0];

Programmatically trigger slide:

// go to next slide
mySlider.slider( 'next' );

// back to previous slide
mySlider.slider( 'prev' );

// slide to slide number 3
mySlider.slider( 3 );

Change options on the fly:

// see possible OPTIONs in 'standalone' section below

// set single OPTION
mySlider.slider( 'set', OPTION, VALUE );

// set multiple OPTIONs at once
mySlider.slider( 'set', {
    OPTION: VALUE,
    OPTION: VALUE
} );

/**
 * Reset OPTIONs to their initial VALUE
 */

// single OPTION
mySlider.slider( 'reset', OPTION );

// multiple OPTIONs
mySlider.slider( 'reset', [OPTION, OPTION] );

// all OPTIONs
mySlider.slider( 'reset' );

Remove slider and its traces from element:

mySlider.slider( 'destroy', 'destroy' );

Use slider js standalone

Example for the initial call to a HTMLElement (or HTMLCollection, NodeList or CSS selector) with its available options and default values:

var mySlider = new Slider( document.getElementById( 'my-slider' ), {
    startSlide: 1,
    // animation duration in ms
    duration: 500,
    // loop from end to start and the other way round
    loop: true,
    // pager position: 'bottom', 'top' or 'none'
    pager: 'bottom',
    // show/hide navigation
    navigation: false,
    // ratio or excact size like '300x200' or '450x45%'
    dimension: '16:9'
    // number of slide to show at once
    columns: 1,
    // number of slides to scroll on a slide action
    // should be between 1 and columns (see above)
    // otherwise it's calculated to its min/max possible value
    jump: 'columns',
    // auto slide in ms
    slideshow: false,

    // callbacks (not changeable after init)
    onInit: function () {},
    onBeforeSlide: function () {},
    onSlide: function () {},
    onSlideComplete: function () {}
} );

Questions, concerns, needs, suggestions?

Don’t hesitate! Issues welcome.