Examples
1. Slide animation module
anim-horizontal Slides animated horizontally
<div id="example-01" class="ma5slider anim-horizontal outside-navs outside-dots horizontal-navs horizontal-dots">
anim-vertical Slides animated vertically
<div id="example-02" class="ma5slider anim-vertical outside-navs outside-dots horizontal-navs horizontal-dots">
anim-fade Slides animated by fade effect
Note: During mouse drag animation is always horizontal.
<div id="example-03" class="ma5slider outside-navs outside-dots horizontal-navs horizontal-dots anim-fade">
2. Arrows direction module
horizontal-navs Arrows left and right
<div id="example-04" class="ma5slider anim-horizontal horizontal-navs">
vertical-navs Arrows top and bottom
<div id="example-05" class="ma5slider anim-vertical vertical-navs">
3. Nesting arrows module
inside-navs Arrows inside
#1 - inside horizontally
<div id="example-06" class="ma5slider anim-horizontal horizontal-navs inside-navs">
#2 - inside vertically
<div id="example-07" class="ma5slider anim-vertical vertical-navs inside-navs">
outside-navs Arrows outside
#1 - outside horizontally
<div id="example-08" class="ma5slider anim-horizontal horizontal-navs outside-navs">
#2 - outside vertically
<div id="example-09" class="ma5slider anim-vertical vertical-navs outside-navs">
4. Dots direction module
horizontal-dots Dots placed horizontally
You can add additional align parameters: left-dots, right-dots, center-dots.
#1 - dots centered
<div id="example-10" class="ma5slider horizontal-dots center-dots">
#2 - dots left
<div id="example-11" class="ma5slider horizontal-dots left-dots">
#3 - dots right
<div id="example-12" class="ma5slider horizontal-dots right-dots">
vertical-dots Dots placed vertically
You can add additional align parameters: top-dots, bottom-dots, middle-dots, left-dots, right-dots.
#1 - middle-dots
<div id="example-13" class="ma5slider anim-vertical vertical-navs vertical-dots middle-dots">
#2 - bottom-dots
<div id="example-14" class="ma5slider anim-vertical vertical-navs vertical-dots bottom-dots">
#3 - top-dots
<div id="example-15" class="ma5slider anim-vertical vertical-navs vertical-dots top-dots">
#4 - left-dots
<div id="example-16" class="ma5slider anim-vertical vertical-navs vertical-dots middle-dots left-dots">
5. Dots ordering module
top-dots Dots placed before slides
<div id="example-17" class="ma5slider horizontal-dots center-dots top-dots">
bottom-dots Dots placed after slides
<div id="example-18" class="ma5slider horizontal-dots center-dots bottom-dots">
6. Nesting dots module
inside-dots Dots inside
#1 - horizontal dots inside
<div id="example-19" class="ma5slider anim-horizontal horizontal-dots horizontal-navs center-dots inside-dots">
#2 - vertical dots inside
<div id="example-20" class="ma5slider anim-vertical vertical-dots vertical-navs center-dots inside-dots">
outside-dots Dots outside
#1 - horizontal dots outside
<div id="example-21" class="ma5slider anim-horizontal horizontal-dots horizontal-navs center-dots outside-dots">
#2 - vertical dots outside
<div id="example-22" class="ma5slider anim-horizontal horizontal-dots horizontal-navs center-dots outside-dots">
7. Navs hover module
hover-navs Show arrows at hover
<div id="example-23" class="ma5slider anim-horizontal horizontal-dots horizontal-navs inside-navs center-dots inside-dots hover-navs">
8. Dots hover module
hover dots Show dots at hover
<div id="example-24" class="ma5slider anim-horizontal horizontal-dots horizontal-navs inside-navs center-dots inside-dots hover-dots">
9. Loop module
loop-mode Enable loop for slides
#1 - loop anim-horizontal
<div id="example-26" class="ma5slider anim-horizontal outside-dots center-dots inside-navs loop-mode">
#2 - loop anim-vertical
<div id="example-27" class="ma5slider anim-vertical outside-dots vertical-dots inside-navs vertical-navs loop-mode">
10. Hidden dots module
hidden-dots Hide dots
<div id="example-28" class="ma5slider anim-horizontal inside-dots center-dots inside-navs hidden-dots">
11. Hidden navs module
hidden-navs Hide navs
<div id="example-29" class="ma5slider anim-horizontal inside-dots center-dots inside-navs hidden-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
<div id="example-30" class="ma5slider outside-navs inside-dots loop-mode">
<div class="slides">
<a href="#slide-1"><img src="./images/./images/01.jpg" alt=""></a>
<a href="#slide-2" data-ma5-dot="#888" data-ma5-dot-active="#649100"><img src="./images/06.jpg" alt=""></a>
</div>
</div>
2. Overwrite navs colors
Attribute data-ma5-nav overwrites navs colors for specific slide
<div id="example-31" class="ma5slider inside-navs outside-dots loop-mode">
<div class="slides">
<a href="#slide-1"><img src="./images/01.jpg" alt=""></a>
<a href="#slide-2" data-ma5-nav="#000"><img src="./images/06.jpg" alt=""></a>
</div>
</div>
3. Overwrite animation
Attribute data-ma5-anim overwrites animation for specific slide
Note: During mouse drag animation is always horizontal.
<div id="example-32" class="ma5slider outside-navs outside-dots loop-mode">
<div class="slides">
<a href="#slide-1"><img src="./images/09.jpg" alt=""></a>
<a href="#slide-2" data-ma5-anim="anim-vertical"><img src="./images/01.jpg" alt=""></a>
<a href="#slide-3" data-ma5-anim="anim-fade"><img src="./images/03.jpg" alt=""></a>
</div>
</div>
HTML control
Selectors with class ma5slider__control for external control slider
<a class="ma5slider__control" href="#" data-ma5slider="#example-33" data-ma5slide="4">Go to slide 4</a> <a class="ma5slider__control" href="#" data-ma5slider="#example-33" data-ma5slide="first">First slide</a> <a class="ma5slider__control" href="#" data-ma5slider="#example-33" data-ma5slide="previous">Previous slide</a> <a class="ma5slider__control" href="#" data-ma5slider="#example-33" data-ma5slide="next">Next slide</a> <a class="ma5slider__control" href="#" data-ma5slider="#example-33" data-ma5slide="last">Last slide</a>
Go to slide 4 | First slide | Previous slide | Next slide | Last slide
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 );
});
Autoplay module
Set tempo by data-tempo attribute. For 1500ms: data-tempo="1500"
Example