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:
- Small size, less than 1.1kb minified/gzipped
- Support to UMD: AMD, CommonJS and global definition
- Uses requestAnimationFrame for animations
- Supports Page visibility API to pause/resume transitions when user navigates away from the page
- Accept ease functions to customize the transition animation
- Lots of ready-to-use examples available, just check the example folder
- Animates any numerical css property
Available on npm:
npm install --save simple-sliderand you can also get it on Bower:
bower install --save simple-sliderThis library is also available on https://cdnjs.com/ you can use it just by importing:
- Minified version: https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js
- Unminified version: https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.js
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:
- container: <Element> The HTML element that act as a container for the slider. Defaults to
document.querySelector('*[data-simple-slider]). - children <NodeList/Array> A list of children to be used as slides, you can use the querySelectorAll to have more flexibility on what children of the
containerelement should be used as slides. Defaults tocontainer.children. - paused: Controls carousel auto-transition/slideshow. If value is
trueno transition will happen. Defaults tofalse. - prop: Determines the css property to be animated. Defaults to
left. - duration: Value setting the duration of animation transition. Defaults to
0.5. - delay: Value determining the wait between each animation when auto-transition is enabled. Defaults to
3seconds. - init: <String/Number> Initial value of slide elements when starting a transition animation. Defaults to
-100. - show: <String/Number> The value a slide element should have when it is displayed. Defaults to
0. - end: <String/Number> The value a slide will move to during a transition animation. Defaults to
100. - unit: The css unit value to be used. Defaults to
%. - ease: An ease function, you can use any of these. Defaults to
defaultEaseinternal function. - onChange: A callback function to be invoked each time a slide changes.
- onChangeEnd: A callback function to be invoked at the end of the slide transition
{
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()Swapsinitforendand 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 givenindexvalue.dispose()Disposes of all internal variable references.
- Responsive layout example
- Default slider with no options
- Default slider with options
- Fading/Opacity transition
- Full page transition
- Lightbox integrated
- Mask sliding transition
- Pause slide
- RequireJS usage
- Reverse sliding direction
- Right to left sliding transition
- Slides containing no images
- Top to bottom transition
- Touch swipe example
- Custom ease animation
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