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.