MA5Slider - jQuery Image Slider

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

Customize

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

Overwrite global settings by specific slide settings

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

HTML control

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


Public methods

    // 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);


Events

    // 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



Mouse Draggable Extension

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



Autoplay module

Class name Description Example page
autoplay Auto play slider. Set tempo by data-tempo attribute. For 1500ms: data-tempo="1500" Example