YerSlider is designed for frontend-developpers, suitable for responsive design and potentially can slide anything. There are Demos and Documentation and you can play around with a demo on codepen.io
The script was started to personel understand all the limitations and problems I had with other slider-scripts.
You can read the version history and download the latest stable version here on GitHub.
- fluid slider
- grouping slides depending on breackpoints
- bullets
- thumbs
- touch ready
- css-transition for smooth sliding and javascript fallback
You can look at the enhancement issues for uppcomming features.
Just ask me for your needs at [email protected] or create a new issue.
There are some libraries, YerSlider depends on. Some are permanently required, others depends on individual functionalities.
permanetly required:
depend on individual functionalities:
The "modernizr.js" must be loaded very early in the head section. It detects browser features. YerSlider needs feature detection for js, touch, csstransforms3d, csstransitions and cssanimations.
jQuery can be in latest version of 1.x or 2.x. The YerSlider script was built to use jQuery in the scope of the jQuery variable.
jQuery.noConflict();
jQuery(document).ready(function(){
// use YerSlider scripts in here
});jquery.touchSwipe.js is required, when the swipe functionality is enabled in a slider.
The YouTube iframe API is required, when youtube videos are used in a slide.
The YerSlider folder comes with an subfolder /dependencies/ that holds all nessesary libraries. All of these libraries exept jQuery and modernizr.js are registered in YerSlider and will be autoloaded as required. So you can, but do not need to manualy embed them in your html. YerSlider checks on runtime, if the dependencies exists. If not, YerSlider tries to load them from the dependencies folder. If you want to embed the dependencies asyncron by yourself, please setup dependencies_autoload: false,. To make autoload working, the absolute path of the yersliderfolder is required.
var myslider = new YerSlider();
myslider.init({
yersliderfolderabsolutepath: '/your_assets_folder/yerslider/',
dependencies_autoload: true, // default is true
});The basic html of the slider is what you should provide in your code, to make the YerSlider script working.
<div class="yerslider yerslider-wrap mysliderclass">
<div class="yerslider-viewport">
<div class="yerslider-mask">
<ul class="yerslider-slider">
<li class="yerslider-slide">
<!-- slide content -->
</li>
<li class="yerslider-slide">
<!-- slide content -->
</li>
</ul>
</div>
<!-- buttons, bullets, thumbs appears here by …location: 'inside' -->
</div>
<!-- buttons, bullets, thumbs appears here by …location: 'outside' -->
</div>Load the yerslider.js from the core folder. The best way is to load the script on dependecy of a slider on the page. The following script does this.
if ( jQuery('.yerslider').length > 0 ) {
jQuery.ajax({
url: '/assets/yerslider/core/yerslider.min.js',
dataType: 'script',
cache: true,
async: true,
success: function () {
/* define a slider here */
}
});
}var myslider = new YerSlider();
myslider.init({
sliderid: '.mysliderclass'
});There is a themefolder with an default theme. Inside there is the stylesheet with basic styles. Just copy the theme and make your additions to the styles. Then load the styles in the head of your html or use a preprozessor to add this to your existing basic stylesheet.
If you use enviroments for developing, staging etc., all options of YerSlider can be adapted via the YerSliderGlobals object.
<?php
// development enviroment
// Notice, "::1" is the IPv6 equivalent of the IPv4 127.0.0.1 address
if ( stristr( $_SERVER['SERVER_ADDR'], '127.0.0.1' ) || stristr( $_SERVER['SERVER_ADDR'], '::1' ) ) {
$autoplayinterval = 1000;
}
// production enviroment
elseif ( stristr( $_SERVER['SERVER_NAME'], 'production-domain' ) ) {
$autoplayinterval = 6000;
}
?>
<script>
YerSliderGlobals = {
param: {
autoplayinterval: <?php echo $autoplayinterval; ?>,
},
};
</script>sliderid: '.mysliderclass',imagesloaded: [ 'slide', 'thumbs' ], // [ 'slider', 'slide', 'thumbs' ]
loadingmessagedelay: 30,With imagesloaded slider areas are defined, which are to be checked for loaded images before they are displayed.
'slider' will display the sliderviewport when all images of all slides are loaded.
'slide' will display the sliderviewport when all images of the first slides in the viewport are loaded.
This also pauses sliding and creates an new element inside the viewport with the class .slider-loading until the images of the next current slides are loaded.
'thumbs' will display the thumps when all images used in the thumbs are loaded.
The loadingmessagedelay defines the time in milliseconds to wait, until the element with the class .slider-loading should be created while checking for loaded images.
YerSlider uses some css classes you may could change.
// basic slider
sliderclass: '.yerslider',
sliderwrapclass: '.yerslider-wrap',
sliderwrapclasshasbullets: '.yerslider-has-bullets',
sliderviewportclass: '.yerslider-viewport',
slidermaskclass: '.yerslider-mask',
sliderclass: '.yerslider-slider',
slideclass: '.yerslider-slide',
// previous and next buttons
prevnextclass: '.yerslider-prevnext',
nextclass: '.yerslider-next',
prevclass: '.yerslider-prev',
nextinactiveclass: '.yerslider-next-inactive',
previnactiveclass: '.yerslider-prev-inactive',
// bullets
sliderwrapclasshasbullets: '.yerslider-has-bullets',
bulletswrapclass: '.yerslider-bullets-wrap',
bulletclass: '.yerslider-bullet',
bulletcurrentclass: '.yerslider-bullet-current',
// thumbs
sliderwrapclasshasthumbs: '.yerslider-has-thumbs',
thumbswrapclass: '.yerslider-thumbs-wrap',
thumbsmaskclass: '.yerslider-thumbs-mask',
thumbsitemsclass: '.yerslider-thumbs-items',
thumbsitemclass: '.yerslider-thumbs-item',
// slide is loading message element
loadingclass: '.yerslider-loading',slidegroup: 1,
slidegroupresp: {
0: 1,
400: 2,
800: 3
},slidegap: 0,Per default, the slider slides the amount of slides in the viewport. With the option slidingstep you can manually set the amount of slides to slide.
slidingstep: 2, // undefined or integernextbtn: true,
prevbtn: true,
prevnextlocation: 'inside', // inside, outside
nextclassadd: '',
prevclassadd: '',bullets: true,
bulletclickable: true,
bulletslocation: 'inside', // inside or outside the sliderviewport<li class="yerslider-slide" data-thumb-template-key="1" data-thumb-text="Hello World!">
<!-- slide content -->
</li>thumbs: true,
thumbslocation: 'inside', // inside or outside the sliderviewport
thumbshideiflessthan: 2,
thumbstemplates: {
'1': {
'html': '<p>{{thumb-text}}</p>',
'cssclass': 'my-thumb-template-class'
}
},
thumbsclickable: true,
thumbsready: function( p ) {
/** Fires, after thumbs are ready.
The variable p provides all slider objects
an some parameters.
p {
obj {
sliderwrap: undefined,
sliderviewport: undefined,
slider: undefined,
slide: undefined,
bulletswrap: undefined,
bullets: undefined,
prevbtn: undefined,
nextbtn: undefined,
videoplayers: {},
slides_videoplayers: {},
thumbswrap: undefined,
thumbsitems: undefined,
thumbsitem: undefined,
},
param {
touch: false,
}
}
*/
/** An example from the default theme,
that makes the thumbs scrolling
by following the mouse */
var yersliderthumbs = new YerSliderThumbs();
yersliderthumbs.init({
obj: p.obj,
param: p.param
});
}animationtype: 'ease', // ease, ease-in-out, ease-in, ease-out, linear
animationspeed: 1000,loop: 'none', // infinite, rollbackautoplay: false,
autoplayinterval: 3000,
autoplaystoponhover: true,Continuosly scrolling like a ticker:
autoplaycontinuously: false,
autoplaycontinuouslyspeed: 4000, // milliseconds per slide distance
autoplaycontinuouslystoponhover: true,Falls back to autoplay if css animation is not available.
swipe: false,
swipeandprevnextbtn: false,
swipeanimationspeed: 300,Scrolls the page to the given distance from top scrolltopval: with the speed of scrolltopspeed:
scrolltop: false,
scrolltopval: 0,
scrolltopspeed: 500,Detaching gives the possibility to grab, hide and put slide content outside the slider items and may elsewhere in the document.
detach: {
targets: {
'1': {
selector_wrap: '.detach-target', // selector
selector_item: '.detach-target-item', // selector
insert_selector: 'this', // 'this' (the current slider wrap element) / 'viewport' / 'bullets' / 'thumbs' / any class / any id
insert_method: 'after', // 'before', 'after', 'append', 'prepend'
template_wrap: '<div class="detach-target">{content}</div>', // html
template_item: '<div class="detach-target-item">{content}</div>', // html
change: function( p ) {
/* This function is called on every slide event and
is intended to show the current detachings.
p: {
items: slider items objects,
items_current: current slider items objects
}
*/
},
}
},
sources: {
'1': {
target_id: '1', // key of targets object
selector: '.detach-me p', // selector
source: 'element', // 'element' / 'content'
remove: '.detach-me', // selector
}
}
}