Performs a smooth 2D/3D transition from one HTML element A to another element B.
The transition works be progressively morphing A's transform into B's transform.
- Runs a single transition or a sequence of transitions;
- Transition effect is automatically computed between two slides;
- Fallbacks to browsers that do not support 3D transformations and CSS3 animations;
- Highly customizable:
- Any markup you want. Only restriction is sliders to be contained in a parent blocked element;
- Strong event driven support;
- Single transition or a sequence of transitions (movie mode);
- Transition duration, easing function animation and zoom vertexes;
- Optional user zoomming and panning between each transition.
- Responsive design, suitable for any window sizes;
- Optionally loads images asynchronously to save page load times, when slides are images.
You can install from npm:
npm install jquery.rsSlideIt --save
or directly from git:
or you can download the Zip archive from github, clone or fork this repository and include
jquery.rsSlideIt.js from your local machine.
You also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.
1. Add script
<script src=""></script><script src=""></script><script src=""></script>
If you care about older browsers, primarily versions of IE prior to IE9, then replace the jQuery
The Modernizr library should be loaded before the plugin.
jquery.rsSlideIt.js should be loaded after the jQuery and Modernizr libraries. In production environment, it is recommended the use of the minimized version
Create a blocked element with slide elements inside.
The above markup represents a viewport with 4 slides.
Any markup can be used. Your container does not have to be a
div and your slides do not have to
Create plugin instance and set previous/next events
4. CSS (optional)
How it works
During the plugin initialization, the plugin performs two tasks:
- Loads the CSS transform property of each slide into an internal data structure.
- Inserts a
divelement between your container and the slides, i.e., it changes the DOM from
<!-- new div element -->
Let's call this new
div the world.
When a request to make a transition to a slideN is received, the plugin smoothly changes the world transformation to the slideN reverse transformation, e.g., if your slides are
then when a transition is done:
- from slide1 to slide2, the world transform changes from
- from slide2 to slide3, the world transform changes from
- from slide3 to slide4, the world transform changes from
- from slide4 to slide1, the world transform changes from
If 3D transformations are not supported by the browser, the plugin adds a fallback class to the container element, which is by default
So, if you 3D slide is
rotateX(45deg) rotateZ(5deg) you can fallback it to 2D, by adding another CSS rule:
/* 3D transformation *//* 2D fallback for older browsers */
Please note, that if Modernizr is not loaded on browsers that support 3D transformations, and no 2D CSS fallback is defined, the 3D transformations will still render correctly, but the plugin will make 2D transitions, because the plugin relies on what is returned by Modernizr.csstransforms3d, and if Modernizr is missing, it means returning false.
This project is licensed under the terms of the MIT license
Bug Reports & Feature Requests
Please use the issue tracker to report any bugs or file feature requests.
Please refer to the Contribution page from more information.