slidr.js
A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required.
Tested on Chrome 26.0, Firefox 20.0, Safari 5.1.7, IE 10, Opera 16.0. Limited support for IE8/9.
Features
- Add as many Slidr's as you want - even place them within each other.
- Dynamic resizing - adapts to the size of its content, unless you don't want it to.
- Keyboard navigation - move your cursor on top of a Slidr, and hit the arrow keys!
- Touch navigation (mobile) - change slides by swiping left, right, up or down!
Instructions
Include either slidr.js
or slidr.min.js
somewhere at the bottom of your html page, after the body content.
<script type="text/javascript" src="/path/to/slidr.min.js"></script>
HTML
slidr.js works on any inline
, inline-block
or block
elements with an id
defined.
Valid slides include any first-level children elements with the data-slidr
attribute set to some unique value within the parent scope. For example:
apple banana coconut apple banana coconut
are all valid html markup for creating three different Slidr
's within the same page.
(inline elements are transformed into inline-blocks in order to apply transitions).
Javascript
A global slidr
object is available for calling. The most minimal way of creating a slidr is this:
slidrstart;
create()
accepts an optional settings parameter as its second argument. A call with all the settings toggled looks like so:
slidrstart;
Settings
Full details on available settings listed below:
Parameter | Type | Default | Description |
---|---|---|---|
after |
function | no-op | Callback function after a slide transition finishes. |
before |
function | no-op | Callback function before a slide transition begins. |
breadcrumbs |
bool | false | Show or hide breadcrumbs on start(). true or false . |
controls |
string | border | Show or hide control arrows on start(). border , corner or none . |
direction |
string | horizontal | The default direction for new slides. horizontal or h , vertical or v . |
fade |
bool | true | Whether slide transitions should fade in/out. true or false . |
keyboard |
bool | false | Whether to enable keyboard navigation upon mouseover. true or false . |
overflow |
bool | false | Whether to overflow transitions at slidr borders. true or false . |
pause |
bool | false | Whether to pause on mouseover when running in auto(). true or false . |
theme |
string | #fff | Sets color theme for breadcrumbs/controls. #hexcode or rgba(value) . |
timing |
object | {} | Custom animation timings to apply. {'transition': 'timing'} . |
touch |
bool | false | Whether to enable touch navigation for mobile devices. true or false . |
transition |
string | linear | The default transition to apply. cube , linear , fade , or none . |
The before
and after
callback functions return the following metadata:
id: "slidr-id" in: el: #<HTMLElement> slidr: "data-slidr-in" trans: "transition-in" dir: "direction-in" out: el: #<HTMLElement> slidr: "data-slidr-out" trans: "transition-out" dir: "direction-out"
Global API
The global slidr
namespace provides the following function calls:
/** * Current version. * @return */ {}; /** * Available transitions. * @return */ {}; /** * Creates and returns a Slidr. * Calling create on the same element twice returns the already instantiated Slidr. * @param * @param */ {};
Slidr API
For javascript control, you can save a reference to the Slidr
object as follows:
// Initialize a Slidr. // Display breadcrumbs, overflow transitions, use cube transition.var s = slidr; // Add horizontal slides with default linear transition.// The extra "one" allows the slidr to circle back and loop infinitely.s; // Add vertical slides using a cube transition.s; // Now start.sstart;
Slidr
functions are fully chainable (where it makes sense to do so). The following is equivalent:
var s = slidr start;
The full list of available functions in a Slidr
object is listed below:
/** * Start the Slidr! * Automatically finds slides to create if nothing was added prior to calling start(). * @param * @return */ {}; /** * Check whether we can slide. * @param * @return */ {}; /** * Slide! * @param * @return */ {}; /** * Adds a set of slides. * @param * @param * @param * @param * @return */ {}; /** * Automatically advance to the next slide after a certain timeout. Calls start() if not already called. * @param * @param * @param * @return */ {}; /** * Stop auto transition if it's turned on. * @return */ {}; /** * Set custom animation timings. * @param * @param * @return */ {}; /** * Toggle breadcrumbs. * @return */ {}; /** * Toggle controls. * @param * @return */ {};
CSS
Temporary scrollbar during transitions
On some browsers, Slidr
's that transition beyond the viewport might force an unwanted temporary scrollbar to appear
(although this won't affect the page, the flickering can still be annoying). To fix this, add the following CSS:
Dynamic resize
Slidr
follows a fairly straightforward heuristic for figuring out what it's width or height should be. If the width
and height
is explicitly set, Slidr
will not resize. Otherwise, it will always adapt to the size of its content.
You can also set just one and it'll dynamic resize the other.
If min-width
and min-height
is defined, Slidr
will only resize if the content exceeds those bounds.
Dynamically resizing (no width/height set):
good gorgeous unbelievable
Static sizing (width and height set):
good gorgeous unbelievable
Slidr controllers
Slidr
controllers are marked up like so:
You can customize the look of Slidr
controls through CSS selectors like below:
//
Note: controller arrows make use of the :after
psuedo element.
To hide the default triangular arrow, use the following CSS:
// // //
Slidr breadcrumbs
Slidr
breadcrumbs have a similar HTML markup.
Each ul
denotes an entire row, while each li
denotes an individual breadcrumb:
...
Thus you can configure them like so:
//
In the worst case, feel free to create your own controllers and access via the Slidr API instead!
For further questions or issues, visit here.
License
This software is free to use under the MIT license.