v1.1 : added touchswipe, hardware accelerated animation, optimized positioning function to remove glitch in IOS, removed redundant DOM selectors, modified responsive function to update wrapper width on resize
features (the demo)
- Settings. Flexible setup. Next, previous, pagination, and element toggle selector definitions.
- Setup. Multiple slide width, visible stage, and fully responsive.
- Callbacks. Callbacks on initialization, individual slide load (via post load), slide start, slide complete.
- Post Load. Post image load feature. Progressively loads images after the page is loaded.
- ¡To do! Animation Hook. Define your own animation.
- Support for IE 7+, Chrome, Safari, Firefox, IOS 3+, Android 3+. Not tested in Opera or older versions of Chrome, Safari, Firefox. Easing supported with jquery.easing.1.3.js.
- Make base.resizeElements work with offset option.
- Responsive Height Option. By default, the slider's height is responsive if the using 100% width block images. May include function however to set the style of the slider's height.
- Rework base.fillGaps to work with post loaded images.
- Establish method for passing updated args on to callback functions if using the Animation Hook.
- A shadow box mode.
| focalClass | The classname of the focal point of the slider (or 'active' slide). Defaults to 'focalPoint'. |
| offset | ¡To do! The center point of the slider. Defaults to "$(this).width() / 2" (or center of the slider). |
| selectors | Selectors for the paginating elements. Example "$('ul > li')". No Default. |
| toggle | A series of elements to toggle the focalClass of. Can be used to show/hide captions. Example "$('.descriptions > div'')" No Default. |
| nextSlide | Selector for the next slide. No Default. |
| previousSlide | Selector for the previous slide. No Default. |
| hashChange | Optional boolean that gets passed through the callback args. Defaults to false. |
| resizeDelay | Delay for the window resize. Defaults to 1. |
| sldrNumber | Number of slides that increases when the sldr is initiated. Defaults to 0. |
| sldrInit | Callback. Accepts function name. When the sldr is initiated, before the DOM is manipulated. No Default. |
| sldLoaded | Callback. Accepts function name. When individual slides are loaded. No Default. |
| sldrLoaded | Callback. Accepts function name. When the full slider is loaded, after the DOM is manipulated. No Default. |
| sldrStart | Callback. Accepts function name. Before the slides change focal points. No Default. |
| sldrComplete | Callback. Accepts function name. After the slides are done changing focal points. No Default. |
| sldrWidth | The width of the slider. Set to 'responsive' for full width slides. Set to number for fixed width. Defaults to the width of the slider. |
| animate | ¡To do! Hook for custom animation. Accepts function name. Defaults to "base.animate" in jquery.sldr.js. |
| animateJquery | Force default animation to jquery animate(). Defaults to false using CSS transitions. Browsers that do not support CSS transitions use jquery animate(). |
| sldrAuto | Auto timer for transition. Defaults to false. |
| sldrTime | Auto timer time transition time. Defaults to 8000. |
| isBrowser | Variable for setting browser. Defaults to the navigator.userAgent. |
| isIE | Variable for Internet Explorer. Defaults to false. Will be set to true based on navigator.userAgent. |
Markup:
Each slide element requires at least one unique class that must appear first in the attribute value.
<div id="SLDR-ONE" class="sldr">
<ul class="wrp animate">
<li class="elmnt-one"><img src="img/Lake.jpg" width="1000" height="563"></li>
<li class="elmnt-two"><img src="img/Mountain-Range.jpg" width="1000" height="563"></li>
<li class="elmnt-three"><img src="img/Mt-Fuji.jpg" width="1000" height="563"></li>
<li class="elmnt-four"><img src="img/Pink-Forest.jpg" width="1000" height="563"></li>
</ul>
</div>CSS:
This CSS uses positioning to move the slide from left to right but alternate styling can be used to create different types of transitions.
.sldr {
max-width: 825px;
margin: 0 auto;
overflow: visible;
position: relative;
clear: both;
display: block;
}
.sldr > ul.animate {
-webkit-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-moz-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);
-o-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */
}
.sldr > ul > li {
float: left;
display: block;
width: 825px;
}jQuery:
$( window ).load( function() {
$( '.sldr' ).each( function() {
var th = $( this );
th.sldr({
focalClass : 'focalPoint',
offset : th.width() / 2,
sldrWidth : 'responsive',
nextSlide : th.nextAll( '.sldr-nav.next:first' ),
previousSlide : th.nextAll( '.sldr-nav.prev:first' ),
selectors : th.nextAll( '.selectors:first' ).find( 'li' ),
toggle : th.nextAll( '.captions:first' ).find( 'div' ),
sldrInit : sldrInit,
sldrStart : sldrStart,
sldrComplete : sldrComplete,
sldrLoaded : sldrLoaded,
sldrAuto : true,
sldrTime : 2000,
hasChange : true
});
});
});/**
* When the sldr is initiated, before the DOM is manipulated
* @param {object} args the slides, callback, and config of the slider
* @return null
**/
function sldrInt( args ) { }
/**
* When individual slides are loaded
* @param {object} args the slides, callback, and config of the slider
* @return null
**/
function sldLoaded( args ) { }
/**
* When the full slider is loaded, after the DOM is manipulated
* @param {object} args the slides, callback, and config of the slider
* @return null
**/
function sldrLoaded( args ) { }
/**
* Before the slides change focal points
* @param {object} args the slides, callback, and config of the slider
* @return null
**/
function sldrStart( args ) { }
/**
* After the slides are done changing focal points
* @param {object} args the slides, callback, and config of the slider
* @return null
**/
function sldrComplete( args ) { }Slides return an object of the following items;
{
'slides' : {
(array of slides)
},
'callback' : {
(the previous, current, next slide variables)
},
'config' : {
(all of the original settings described above)
}Slides:
| sld | Slide jQuery object. |
| slideNum | Slide number. |
| id | Slide id. |
| class_name | Slide class. |
| html | Slide inner html() |
Callback:
| sldr | jQuery object of the slider. |
| prevFocalIndex | The index() of the previous slide. |
| prevSlideNum | The slide number of the previous slide. |
| currentFocalIndex | The index() of the current slide. |
| currentClass | The class of the current slide. |
| currentID | The id of the current slide |
| currentFocalPoint | The pixel distance from the left of the slide group to the center. |
| currentSlideNum | The slide number of the current slide |
| shiftWidth | The amount of change from one slide to the next. |
| nextFocalIndex | The index() of the next slide. |
| nextSlideNum | The slide number of the next slide. |
The post load image feature can progressively load images one by one after the page has finishied loading any non-slider images, scripts, etc. To take advantage of it only the markup needs to be changed. Replace images with a markup element with a class of 'sldr-load'. When the plugin sees these elements it will grab the attributes 'class' , 'src' , 'alt' , 'title' , 'width' or 'height' and apply them to the image when it's ready. Below is the sample markup;
<div id="SLDR-ONE" class="sldr">
<ul class="wrp animate">
<li class="elmnt-one"><div class="sldr-load" src="img/Lake.jpg" width="1000" height="563"></div></li>
<li class="elmnt-two"><div class="sldr-load" src="img/Mountain-Range.jpg" width="1000" height="563"></div></li>
<li class="elmnt-three"><div class="sldr-load" src="img/Mt-Fuji.jpg" width="1000" height="563"></div></li>
<li class="elmnt-four"><div class="sldr-load" src="img/Pink-Forest.jpg" width="1000" height="563"></div></li>
</ul>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent