WordPress Slider Plugin

There are tons of slider plugins for WordPress. Often they try to invent something new to achieve their goal (mostly just slide images from left to right). This often ends up in new post types, fancy shortcodes, … but they all have one thing in common: double work!

So why not create a slider directly in the editor by using what’s already provided by WordPress!? Something like … a gallery!

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.