Responsive Customizable jQuery Carousel / Slideshow Plugin - ma5slider

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

More features:

• Customizable pagination dots and navigation arrows.
• Autoplay and infinite looping.
• 3 built-in animations: horizontal scrolling, vertical scrolling and crossfading.

Basic usage:

1. Include jQuery JavaScript library and the jQuery MA5 Slider plugin's JS & CSS files on the html page.

<!-- jQuery -->
<script src="/path/to/jquery.min.js"></script>

<!-- MA5 Slider -->
<link href="/path/to/ma5slider.min.css" rel="stylesheet">
<script src="/path/to/ma5slider.min.js"></script>

2. Create a group of slides and insert them into a container with the CSS class of 'ma5slider'.

<div id="mySlider" class="ma5slider">
  <div class="slides">
    <a href="#slide-1"><img src="1.jpg" alt=""></a>
    <a href="#slide-2"><img src="2.jpg" alt=""></a>
    <a href="#slide-3"><img src="3.jpg" alt=""></a>
    <a href="#slide-4"><img src="4.jpg" alt=""></a>
    <a href="#slide-5"><img src="5.jpg" alt=""></a>
  </div>
</div>

3. Initialize the slider plugin and attach it to the element 'mySlider'.

ma5slider({ 
  slider: "#mySlider" 
});

4. Customize the plugin by add the following CSS classes to the top container.

• anim-horizontal: horziontal scrolling
• anim-vertical: vertical scrolling
• anim-fade: cross fading
• autoplay: autoplay
• loop-mode: infinite loop
• horizontal-navs: horizontal nav arrows
• vertical-navs: vertical nav arrows
• inside-navs: nav arrows inside the slider
• outside-navs: nav arrows outside the slider
• hover-navs: show nav arrows on hover
• hidden-navs: hide nav arrows
• horizontal-dots: horizontal pagination dots
• bottom-dots: bottom pagination dots
• inside-dots: pagination dots inside the slider
• outside-dots: pagination dots outside the slider
• hover-dots: show pagination dots on hover
• hidden-dots: hide pagination dots

<div id="mySlider" class="ma5slider anim-horizontal loop-mode">
  ...
</div>

5. Customize the slides using the following HTML5 data attributes:

• data-ma5-dot: override the default color of pagination dot
• data-ma5-dot-active: override the color of dot when active
• data-ma5-nav: override the default color of nav arrows
• data-ma5-anim: override the default animation

<a href="#slide-2" data-ma5-dot="#888" data-ma5-dot-active="#649100">
  <img src="2.jpg" alt="">
</a>

6. API methods:

// goto slide 3
ma5sliderGoToSlide('#slider', 3 );

// goto next slide
ma5sliderGoToNext('#slider');

// back to prev slide
ma5sliderGoToPrev('#slider');

// back to the first slide
ma5sliderGoToFirst('#slider');

// goto the last slide
ma5sliderGoToLast('#slider');

Change logs:

2017-09-17

• v1.1.6: Change autoplay function

2017-08-25

• v1.1.5: Fix vertical animation CSS

2017-02-21

• v1.1.4: Add Bower files, update docs

2017-01-24

• v1.1.2: Clear helper css classes js-, update docs, better html contol for loop-mode

2016-12-17

• v1.1.1 Change on to one listener

2016-12-09

• v1.1.0 Refactoring, add events

---

This awesome jQuery plugin is developed by ma-5. For more Advanced Usages, please check the demo page or visit the official website.