Responsive Customizable jQuery Carousel / Slideshow Plugin - ma5slider

Responsive Customizable jQuery Carousel / Slideshow Plugin - ma5slider
File Size: 1.5 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 cross fading.

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