Features
- Mouse draggable
- Responsive
- Mulit-animations: horizontal, vertical and fade
- Individual animation and color settings for each slide.
- JS methods and events
- Customizable by CSS classes
Quick start
HTML in <head>:
<!-- jQuery -->
<script src="./js/jquery.min.js"></script>
<!-- jQuery UI mouse draggable widget -->
<script src="./js/jquery-ui.min.js"></script>
<!-- Touch Event Support for jQuery UI -->
<script src="./js/jquery.ui.touch-punch.min.js"></script>
<!-- MA5 Slider -->
<link href="./css/ma5slider.min.css" rel="stylesheet" type="text/css">
<script src="./js/ma5slider.min.js"></script>
<!-- Call the script -->
<script>
$(window).on('load', function () {
$('.ma5slider').ma5slider();
});
</script>
HTML in <body>:
<div class="ma5slider outside-navs outside-dots anim-horizontal loop-mode">
<div class="slides">
<!-- children = slides -->
<a href="#slide-1"><img src="./images/01.jpg" alt=""></a>
<a href="#slide-2"><img src="./images/02.jpg" alt=""></a>
<a href="#slide-3"><img src="./images/03.jpg" alt=""></a>
</div>
</div>