The quickest way to slide a HTML list
https://jauntyslider.luizgustavomartins.com
Jauntyslider is a lightweight library that allows you to quickly create a slider from your HTML list. Simply add the attribute data-jauntyslider to the list element, as shown in the example below:
<ul data-jauntyslider>Alternatively, you can initialize Jauntyslider in your script:
document.querySelector('ul').jauntyslider()You read that right. No dependencies at all 🙂.
In order to use Jauntyslider, download the zip file, unzip it, then include both css and javascript files in your HTML:
<link href="dist/css/jauntyslider.min.css" rel="stylesheet">
<script src="dist/js/jauntyslider.min.js"></script>Initializing Jauntyslider is as easy as adding the data-jauntyslider attribute to your HTML list element.
<ul data-jauntyslider>
<li><img src="new-horizon.jpg"></li>
[...]
</ul>And there you go! Jauntyslider is up and running in your list.
You can also customize the slider by setting parameters.
<ul data-jauntyslider="duration:fast;">
<li><img src="new-horizon.jpg"></li>
[...]
</ul>As stated in the introduction, Jauntyslider can also be handled by JavaScript.
document.querySelector('ul').jauntyslider({
duration: 'fast'
})You can set more than one parameter at a time:
<ul data-jauntyslider="duration:fast; easing:linear;">
<li><img src="new-horizon.jpg"></li>
[...]
</ul>Jauntyslider supports multiple sliders on the same page:
<ul id="slider-1" data-jauntyslider="duration:fast; easing:linear;">
<li><img src="new-horizon.jpg"></li>
[...]
</ul>
<ul id="slider-2" data-jauntyslider="loop:true;">
<li><img src="my-pet.jpg"></li>
[...]
</ul>Alternatively in your script:
document.querySelector('#slider-1').jauntyslider({
duration: 'fast',
easing: 'linear'
})
document.querySelector('#slider-2').jauntyslider({
loop: 'true'
})[options: move | fade | none]
[default: move]
Defines the transition animation.
[options: forward | backward]
[default: forward]
Defines the direction of the slideshow.
[options: seconds | slow | normal | fast]
[default: normal]
Defines how long the transition animation will run.
[options: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)]
[default: ease]
Defines the easing function of the transition animation.
[options: %, px, pt, em, in...]
[default: inheritance]
Sets the height of the slider.
If not set, it dinamically inherits the height of the original list.
[options: integer]
[default: 1]
Defines in which slide the slider will start.
The first slide is 1 and the last slide is n.
[options: seconds]
[default: 5]
Defines the interval in seconds between the transitions of the slideshow.
[options: true | false]
[default: false]
If true, when reaching the end of the slider, it'll come back to the beginning.
[options: true | false]
[default: true]
If false hides the navigation on the bottom.
[options: true | false]
[default: false]
If true, enables an automatic transition of the slides.
The navigation is allowed even so.
[options: forward | backward]
[default: forward]
Defines the direction of the slideshow.
[options: seconds]
[default: 5]
Defines the interval in seconds between the transitions of the slideshow.
It begins to count only when the current transition is completed.
[options: integer]
[default: 1]
Allows to change the number of the slides travelled by every transition.
[options: %, px, pt, em, in...]
[default: inheritance]
Sets the width of the slider.
If not set, it dinamically inherits the width of the original list.
Jauntyslider is built upon CSS transitions. The codebase takes advantage of ES6+ features compiled to ES5 to support old browsers. We're keeping an eye on Web Animations API as it has been proving to be more flexible over rAF.
If you want to contribute to the project, feel free to send a pull request.
Jauntyslider is open-sourced software licensed under the MIT license.