Examples
1. Slide animation module
anim-horizontal Slides animated horizontally
anim-vertical Slides animated vertically
anim-fade Slides animated by fade effect
Note: During mouse drag animation is always horizontal.
2. Arrows direction module
horizontal-navs Arrows left and right
vertical-navs Arrows top and bottom
3. Nesting arrows module
inside-navs Arrows inside
#1 - inside horizontally
#2 - inside vertically
outside-navs Arrows outside
#1 - outside horizontally
#2 - outside vertically
4. Dots direction module
horizontal-dots Dots placed horizontally
You can add additional align parameters: left-dots, right-dots, center-dots.
#1 - dots centered
#2 - dots left
#3 - dots right
vertical-dots Dots placed vertically
You can add additional align parameters: top-dots, bottom-dots, middle-dots, left-dots, right-dots.
#1 - middle-dots
#2 - bottom-dots
#3 - top-dots
#4 - left-dots
5. Dots ordering module
top-dots Dots placed before slides
bottom-dots Dots placed after slides
6. Nesting dots module
inside-dots Dots inside
#1 - horizontal dots inside
#2 - vertical dots inside
outside-dots Dots outside
#1 - horizontal dots outside
#2 - vertical dots outside
7. Navs hover module
hover-navs Show arrows at hover
8. Dots hover module
hover dots Show dots at hover
9. Loop module
loop-mode Enable loop for slides
#1 - loop anim-horizontal
#2 - loop anim-vertical
10. Hidden dots module
hidden-dots Hide dots
11. Hidden navs module
hidden-navs Hide navs
Overwrite
Global settings can be overwrite by attributess added to specific slide.
1. Overwrite dots colors
Attribute data-ma5-dot, data-ma5-dot-active overwrites dots colors for specific slide
2. Overwrite navs colors
Attribute data-ma5-nav overwrites navs colors for specific slide
3. Overwrite animation
Attribute data-ma5-anim overwrites animation for specific slide
Note: During mouse drag animation is always horizontal.
HTML control
Selectors with class ma5slider__control for external control slider
Methods and events
$('.ma5slider').ma5slider();
$('#example-34').ma5slider('goToSlide', 3);
$('#example-34').on('ma5.animationStart', function () {
console.log('event animationStart');
});
$('#example-34').on('ma5.animationEnd', function () {
console.log('event animationEnd');
});
$('#example-34').on('ma5.firstSlide', function () {
console.log('event firstSlide');
});
$('#example-34').on('ma5.lastSlide', function () {
console.log('event lastSlide');
});
$('#example-34').on('ma5.activeSlide', function (event, slide) {
console.log( 'event activeSlide: ' + slide );
});