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

Responsive Customizable jQuery Carousel / Slideshow Plugin - ma5slider