html5 graph slider,简单易用的jquery响应式轮播图插件ma5slider

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

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

});