🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ma5slider is a responsive, easy-to-use jQuery carousel / slideshow plugin that is highly customizable via CSS classes and HTML5 data attributes.

Carousel

Documentation

ma5slider

jQuery Image Slider. Ease to use, lightweight, responsive, mouse draggable, customizable by CSS classes, custom animations for each slide, JS methods and events. Javascript 16kB

Demo

Quick start

HTML in HEAD:

<head>     <!-- jQuery -->     <script src="https://ma-5.github.io/ma5slider/js/jquery.min.js"></script>           <!-- jQuery UI mouse draggable widget -->     <script src="https://ma-5.github.io/ma5slider/js/jquery-ui.min.js"></script>           <!-- Touch Event Support for jQuery UI -->     <script src="https://ma-5.github.io/ma5slider/js/jquery.ui.touch-punch.min.js"></script>           <!-- MA5 Slider -->     <link href="https://ma-5.github.io/ma5slider/css/ma5slider.min.css" rel="stylesheet" type="text/css">     <script src="https://ma-5.github.io/ma5slider/js/ma5slider.min.js"></script>           <script>         $(window).on('load', function () {             $('.ma5slider').ma5slider();         });     </script> </head>

HTML in BODY:

    <body>         <div class="ma5slider outside-navs outside-dots anim-horizontal loop-mode">             <div class="slides">                 <!-- children = slides -->                 <a href="#slide-1"><img src="https://ma-5.github.io/ma5slider/images/01.jpg" alt=""></a>                 <a href="#slide-2"><img src="https://ma-5.github.io/ma5slider/images/02.jpg" alt=""></a>                 <a href="#slide-3"><img src="https://ma-5.github.io/ma5slider/images/03.jpg" alt=""></a>                 <a href="#slide-4"><img src="https://ma-5.github.io/ma5slider/images/04.jpg" alt=""></a>                 <a href="#slide-5"><img src="https://ma-5.github.io/ma5slider/images/05.jpg" alt=""></a>                 <a href="#slide-6"><img src="https://ma-5.github.io/ma5slider/images/06.jpg" alt=""></a>             </div>         </div>     </body>

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

5. Dots ordering module

Class name Description Example page
bottom-dots default Dots placed after 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. Autoplay module

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

10. Loop module

Class name Description Example page
loop-mode Enable loop for slides Example

11. Dots visibility module

Class name Description Example page
hidden-dots Hide dots Example

12. 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

Methods

1. Go to slide

$('.ma5slider').ma5slider('goToSlide', 3);

2. Go to next slide

$('.ma5slider').ma5slider('goToNext');

3. Go to previous slide

$('.ma5slider').ma5slider('goToPrev');

4. Go to first slide

$('.ma5slider').ma5slider('goToFirst');

4. Go to last slide

$('.ma5slider').ma5slider('goToLast');

Events

1. Slide animation start

$('.ma5slider').on('ma5.animationStart', function () {     console.log('event animationStart'); });

2. Slide animation end

$('.ma5slider').on('ma5.animationEnd', function () {     console.log('event animationEnd'); });

3. On first slide

$('.ma5slider').on('ma5.firstSlide', function () {     console.log('event firstSlide'); });

4. On last slide

$('.ma5slider').on('ma5.lastSlide', function () {     console.log('event lastSlide'); });

5. 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


You May Also Like