https://ruyadorno.github.io/simple-slider
Extremely lightweight carousel micro library.
simple-slider is a carousel micro library based on the requestAnimationFrame API. It makes for a highly testable implementation and less css-dependent.
This package contains a framework agnostic implementation. If you are using AngularJS or Polymer there are some simple-slider framework-specific implementations available:
Available on npm:
npm install --save simple-slider
and you can also get it on Bower:
bower install --save simple-slider
This library is also available on https://cdnjs.com/ you can use it just by importing:
Simply import the script in your html and call the simpleslider.getSlider
function.
<div style="width:612px; height:612px" data-simple-slider>
<img src="https://picsum.photos/612/612?random=1"/>
<img src="https://picsum.photos/612/612?random=2"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js"></script>
<script>
simpleslider.getSlider();
</script>
In this previous example we didn't specified any additional option, in this case the slider will use its default left-to-right sliding animation and the container element will be the first element containing a data-simple-slider
attribute.
var simpleslider = require('simple-slider');
simpleslider.getSlider();
import { getSlider } from 'simple-slider/src';
getSlider();
require(['simple-slider'], function(simpleslider) {
simpleslider.getSlider();
});
Options are set as named properties of a single parameter accepted by the getSlider
function, they help you customize the slider transition and how it's going to work.
The main option is a container
element, this will usually be a <div>
or <ul>
containing the elements to be transitioned, keep in mind that this container should also have a defined width/height value. You can also tweak things such as the delay time between each transition, how long each transition will take, etc.
<div id="myslider" style="width:612px; height:612px">
<img src="https://picsum.photos/612/612?random=1"/>
<img src="https://picsum.photos/612/612?random=2"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js"></script>
<script>
simpleslider.getSlider({
container: document.getElementById('myslider'),
transitionTime:1,
delay:3.5
});
</script>
Here is the list of available values to customize how your slider is going to work:
document.querySelector('*[data-simple-slider])
.container
element should be used as slides. Defaults to container.children
.true
no transition will happen. Defaults to false
.left
.0.5
.3
seconds.-100
.0
.100
.%
.defaultEase
internal function.{
container: document.querySelector('*[data-simple-slider]'),
children: container.children,
paused: false,
prop: 'left',
duration: 0.5,
delay: 3,
init: -100,
show: 0,
end: 100,
unit: '%',
ease: defaultEase function,
onChange: undefined,
onChangeEnd: undefined
}
Some methods are exposed by the returning value of the function allowing you to control the slider.
<div id="myslider" style="width:612px; height:612px">
<img src="http://placekitten.com/g/612/612"/>
<img src="http://placekitten.com/g/612/613"/>
</div>
<script src="../dist/simpleslider.min.js"></script>
<script>
var currentIndex;
function updateCurrentIndex() {
currentIndex = slider.currentIndex();
}
var slider = simpleslider.getSlider({
container: document.getElementById('myslider'),
onChangeEnd: updateCurrentIndex
});
// pauses slideshow
slider.pause();
</script>
currentIndex()
Returns the index of the current displaying image.pause()
Pauses the slideshow.resume()
Resumes the slideshow.reverse()
Swaps init
for end
and reverses the order of slides.nextIndex()
Gets the index of the next slide to be shown.prevIndex()
Gets the index of the previous slide.next()
Switches displaying image to the next one.prev()
Switches displaying image to the previous one.change(index)
Changes image to a given index
value.dispose()
Disposes of all internal variable references.Extensive documentation of the options and methods can be found at the simple-slider official documentation.
A JavaScript carousel micro library is not a new thing (fun fact, simple-slider has been around since 2013).
I would recommend that you take a look at some of the available alternatives and decide by yourself which one better suits your needs.
MIT © Ruy Adorno