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-slider
and you can also get it on Bower:
bower install --save simple-slider
Getting it from cdnjs
This 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
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
Usage in a CommonJS environment
var simpleslider = ;simpleslider;
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
<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.
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
- 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 to
- paused: Controls carousel auto-transition/slideshow. If value is
trueno transition will happen. Defaults to
- prop: Determines the css property to be animated. Defaults to
- duration: Value setting the duration of animation transition. Defaults to
- delay: Value determining the wait between each animation when auto-transition is enabled. Defaults to
- init: <String/Number> Initial value of slide elements when starting a transition animation. Defaults to
- show: <String/Number> The value a slide element should have when it is displayed. Defaults to
- end: <String/Number> The value a slide will move to during a transition animation. Defaults to
- unit: The css unit value to be used. Defaults to
- ease: An ease function, you can use any of these. Defaults to
- 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: documentchildren: containerchildrenpaused: falseprop: 'left'duration: 05delay: 3init: -100show: 0end: 100unit: '%'ease: defaultEase
Some methods are exposed by the returning value of the function allowing you to control the slider.
currentIndex()Returns the index of the current displaying image.
pause()Pauses the slideshow.
resume()Resumes the slideshow.
endand 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
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.
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