Extremly versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. Has nearly every feature that you can find in other sliders on the web.
RTP Slider is dependent on following libraries:
- jQuery (1.7 or higher)
- jquery.easing plugin (1.3 or higher)
- jquery.imagesloaded plugin (2.1 or higher)
It's recommended that you download the latest versions of the libraries yourself:
- http://www.jquery.com/
- http://gsgd.co.uk/sandbox/jquery/easing/
- http://desandro.github.com/imagesloaded/
You may also use a CDN (Content Delivery Network) to load the libraries directly from:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
// initialize and get slider instance
var slider = jQuery('DIV.rtp-slider')
// initialize the slider
.rtpSlider({
config : value,
... : ...
})
// get instance from data
.data('rtpSlider');
You may use the demo example to play around with various config options. It's not yet 100% finished, but should give you a good overview of what this slider is capable of:
The configuration can be overwritten by data attributes on the slider element (ie. data-carousel="0").
sizerDim: option (default: false)
How should the slider dimension be layouted / sized (width for horizontal and height for vertical). Valid options are 'panelsByViewport' or 'viewportByPanels'. We will either adjust the panels to a fluid viewport or set the viewport to the size of the actual panel.
sizerOpp: option (default: false)
How should the slider opposition be layouted / sized (height for horizontal and width for vertical). Valid options are 'panelsByViewport' or 'viewportByPanels'. We will either adjust the panels to a fluid viewport or set the viewport to the size of the actual panel.
setFloat: bool (default: true)
Set panels to float if vertical is not enabled.
vertical: bool (default: false)
Enable vertical sliding. Default is horizontal.
shrinkViewport: bool (default: false)
Shrink the viewport on the current layout. Option is seldomly usefull and only available if there is no sizer set.
fillViewport: bool (default: false)
Fill viewport to avoid empty slots if possible. Option is seldomly usefull and only available if there is no sizer set.
carousel: bool (default: false)
Enable the carousel or endless swipe mode.
panelsVisible: float (default: 1)
How many panels should be visible at once.
clonePanels: integer (default: false)
Force number of cloned panels. Will be distributed acording to alignViewport option.
cloneBefore: integer (default: false)
Force number of cloned panels at the begining of the container.
cloneAfter: integer (default: false)
Force number of cloned panels at the end of the container.
align: float (default: 0.5)
This is a shared value for both align options (alignPanel and alignViewport). It does not do anything on it's own, but normally you want both align options to be the same. You may also use 'left', 'center' or 'right' (only the first letter is important).
alignPanelDim: float (default: 0.5)
Offset the panel to align it to the viewport dimension. If you align it to the right (1), the right side of the panel will be shown at the viewport position.
alignPanelOpp: float (default: 0.5)
Offset the panel to align it to the viewport opposition. If you align it to the bottom (1), the bottom side of the panel will be shown at the viewport position.
alignViewport: float (default: 0.5)
Offset the shown position into the viewport. Align it to left (0), center (0.5) or right (1). Use alignPanel to offset the panel itself to align the active slide as you want.
autoVpOppDeadZone: float (default: 0.5)
How far has the panel to be into view until adjusting the viewport to the full opposite dimension.
autoslide: bool (default: false)
Start the autoslider after slider has been initialized.
autoslideAction: action (default: +1)
The action to execute on each autoslide.
autoslidePauseOnHover: bool (default: false)
Pause the autoslider when the mouse hovers over the viewport. Will be restarted after the mouse moves out of the viewport again (see autoslideResumeDelay).
autoslideStopOnHover: bool (default: false)
Stop the autoslider when the mouse hovers over the viewport.
autoslideStopOnAction: bool (default: false)
Stop the autoslider when the user executes an action like clicking on a navigation item.
autoslideDelay: integer (default: 3500)
Default delay between slide steps.
autoslideFirstDelay: integer (default: 1000)
Delay after initialization or any other autoslide resume/start call.
autoslideResumeDelay: integer (default: false)
Special delay when the autoslider is resumed from the paused state.
progressBar: bool (default: false)
Show a progress bar while waiting for the next (auto) slide.
progressBarPosition: string (default: 'append')
Where should we put the progress bar dom node. Valid options are 'append', 'prepend' or 'both'.
curClass: string (default: 'current')
Mark the currently active panel with this class.
curClassDeadZone: float (default: 0.25)
How much has the active panel to be visible until setting the current class.
easeDuration: integer (default: 1200)
The duration of one slide step.
easeFunction: string (default: 'easeInOutExpo')
Easing function for the slide step.
slideFirst: float (default: 0)
The first slide to load on initialization. Can also be a function which should return the value.
fps: integer (default: 25)
Try to acheive that many frames per second when doing animations. This is mainly used when resizing or updating the layout otherwise, which will also happen when doing swipes and other actions.
vsync: bool (default: false)
Do layout and other updates as soon as we receive the corresponding events.
gestureSwipe: bool (default: false)
Enable the gesture library for swiping.
mouseSwipe: bool (default: false) (deprecated/broken)
Enable the mouse for swiping.
touchSwipe: bool (default: false) (deprecated/broken)
Enable touch devices for swiping.
swipeThreshold: integer (default: 5)
Minimum amount of pixels before we decide in which direction the swipe is going. This is done to still be able to scroll the page via touch events.
linkWrapperToViewportDim: bool (default: true)
Link the dimension of the outer wrapper to the dimension of the viewport.
linkWrapperToViewportOpp: bool (default: false)
Link the opposite dimension of the outer wrapper to the opposite dimension of the viewport.
navArrows: bool (default: false)
Enable the navigation arrows widget.
navArrowAttach: option (default: 'wrapper')
Where to attach the navigation arrows. Valid options are 'wrapper' or 'panels'.
navArrowNextText: string (default: 'right »')
Set the text or html for the next nav arrow.
navArrowPrevText: string (default: '« left')
Set the text or html for the previous nav arrow.
navArrowPosition: option (default: 'default')
Where to attach the nav arrows. By default we prepend the prev arrow and append the nav arrow. Other options are to 'prepend' or to 'append' both arrows. Or 'reverse' the default position.
navDots: bool (default: false)
Enable the navigation dots widget.
navDotAltFormat: function (slide)
Return the alt text for the nav dot image.
navDotTitleFormat: function (slide)
Return the title text for the nav dot image.
navDotStepFunction: function (slide, progress)
Function is called to update the nav dots when visibility is changing. By default we adjust the opacity of the image.
navKeyboard: bool (default: false)
Enable the keyboard navigation plugin.
navKeyboardPrev: keycode (default: [37/38])
The charcode to trigger the prev action (use 'up' key if vertical mode is enabled).
navKeyboardNext: keycode (default: [39/40])
The charcode to trigger the next action (use 'down' key if vertical mode is enabled).
navToolbar: bool (default: false)
Enable the navigation toolbar (mainly for autoslider).
navToolbarButtons (default: 'rewind, toggle-stop, toggle-pause, forward')
Buttons available on the toolbar in that order. If carousel is not enabled we will add first and last button to the default configuration.
We use webmerge to create the release files. Once it is installed, you simply need to execute the compiler scripts.
This is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, either version 3 of the License, or (at your option) any later version.
- http://rawgit.luolix.top/mgreter/slider/master/examples/swipe.html
- http://rawgit.luolix.top/mgreter/slider/master/examples/addons.html
- http://rawgit.luolix.top/mgreter/slider/master/examples/nested.html
- http://rawgit.luolix.top/mgreter/slider/master/examples/adaptive.html
- http://rawgit.luolix.top/mgreter/slider/master/examples/tiles.html (alpha)
- http://rawgit.luolix.top/mgreter/slider/master/examples/carousel3d.html (alpha)
- http://rawgit.luolix.top/mgreter/slider/master/examples/demo/demo.html (experimental)
Use the mouse or touch device to swipe through the panels!
I wrote a small script to parse the code and generate some api docs. This is at a very early stage, but may be of some interest to some people. It's not really about documenting the API. More to get an overview over the code, the event handlers and method invocation.