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