简单易用的jquery响应式轮播图插件ma5slider Responsive Customizable jQuery Carousel / Slideshow Plugin

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