Image slider
Ease to use, lightweight, responsive, mouse draggable, customizable by CSS classes, custom animations for each slide, JS methods and events. Javascript 16kB
Github v 1.1.6
You can use a CSS classes next to ma5slider to the final appearance.
<div id="example..." class="ma5slider anim-horizontal top-dots outside-navs ...">
Tip: Slider without CSS classes for dots hides dots. Slider without CSS classes for arrows hides arrows.
Rule: Use ID for each slider.
Rule: You can choose only one parameter of each module.
1. Slide animation module
Class name | Description | Example page |
---|---|---|
anim-horizontal default | Slides animated horizontally. | Example |
anim-vertical | Slides animated vertically. | Example |
anim-fade | Slides animated by fade effect. | Example |
2. Arrows direction module
Class name | Description | Example page |
---|---|---|
horizontal-navs default | Arrows left and right. | Example |
vertical-navs | Arrows top and bottom. | Example |
3. Nesting arrows module
Class name | Description | Example page |
---|---|---|
inside-navs default | Arrows inside. | Example |
outside-navs | Arrows outside. | Example |
4. Dots direction module
Class name | Description | Example page |
---|---|---|
horizontal-dots default |
Dots placed horizontally. You can add additional align parameters: center-dots default, left-dots, right-dots |
Example |
vertical-dots |
Dots placed vertically. You can add additional align parameters: middle-dots default, top-dots, bottom-dots |
Example |
5. Dots ordering module
Class name | Description | Example page |
---|---|---|
bottom-dots default | Dots placed after slides. | Example |
top-dots | Dots placed before slides. | Example |
6. Nesting dots module
Class name | Description | Example page |
---|---|---|
outside-dots default | Dots outside. | Example |
inside-dots | Dots inside. | Example |
7. Navs hover module
Class name | Description | Example page |
---|---|---|
hover-navs | Show arrows at hover | Example |
8. Dots hover module
Class name | Description | Example page |
---|---|---|
hover-dots | Show dots at hover | Example |
9. Loop module
Class name | Description | Example page |
---|---|---|
loop-mode | Enable loop for slides | Example |
10. Dots visibility module
Class name | Description | Example page |
---|---|---|
hidden-dots | Hide dots | Example |
11. Navs visibility module
Class name | Description | Example page |
---|---|---|
hidden-navs | Hide navs | Example |
Global settings can be overwrite by attributess added to specific slide.
1. Overwrite dots color
Attribute name | Description | Example page |
---|---|---|
data-ma5-dot, data-ma5-dot-active |
Overwrite dots colors for specific slide. | Example |
2. Overwrite navs color
Attribute name | Description | Example page |
---|---|---|
data-ma5-nav | Overwrite nav colors for specific slide. | Example |
3. Overwrite animation
Note: During mouse drag animation is always horizontal.
Attribute name | Description | Example page |
---|---|---|
data-ma5-anim | Overwrite animation for specific slide. | Example |
External control elements for the slider.
<a class="ma5slider__control" href="#slide.." data-ma5slider="#example-33" data-ma5slide="4">Go to slide 4</a> <a class="ma5slider__control" href="#slide.." data-ma5slider="#example-33" data-ma5slide="first">First slide</a> <a class="ma5slider__control" href="#slide.." data-ma5slider="#example-33" data-ma5slide="previous">Previous slide</a> <a class="ma5slider__control" href="#slide.." data-ma5slider="#example-33" data-ma5slide="next">Next slide</a> <a class="ma5slider__control" href="#slide.." data-ma5slider="#example-33" data-ma5slide="last">Last slide</a>Example
// Go to previous slide $('.ma5slider').ma5slider('goToPrev'); // Go to next slide $('.ma5slider').ma5slider('goToNext'); // Go to first slide $('.ma5slider').ma5slider('goToFirst'); // Go to last slide $('.ma5slider').ma5slider('goToLast'); // Go to 3 slide $('.ma5slider').ma5slider('goToSlide', 3);
// Slide animation start $('.ma5slider').on('ma5.animationStart', function () { console.log('event animationStart'); }); // Slide animation end $('.ma5slider').on('ma5.animationEnd', function () { console.log('event animationEnd'); }); // On first slide $('.ma5slider').on('ma5.firstSlide', function () { console.log('event firstSlide'); }); // On last slide $('.ma5slider').on('ma5.lastSlide', function () { console.log('event lastSlide'); }); // Return active slide number $('.ma5slider').on('ma5.activeSlide', function (event, slide) { console.log( 'event activeSlide: ' + slide ); });Example
jQuery UI with "draggable" turns on slider mouse drag action.
Prepare jQuery UI file: Builder link
For touch action in jQuery UI you can add Touch Event Support for jQuery UI: jQuery UI Touch Punch
Class name | Description | Example page |
---|---|---|
autoplay | Auto play slider. Set tempo by data-tempo attribute. For 1500ms: data-tempo="1500" | Example |