Lightweight, Responsive, Touch Friendly, Dependency-Free JavaScript Slider with Hardware Accelerated Transitions.
npm install micro-slidersh
npm install --save micro-slider
`
Usage within a Webpack / Gulp context
You can import it using either require or import syntax:
`javascript
// ES6 Syntax
import MicroSlider from 'micro-slider';
const slider = new MicroSlider('.micro-slider', {...options...});
// RequireJS / CommonJS
var MicroSlider = require('micro-slider');
var slider = new MicroSlider('.micro-slider', {...options...});
`
Usage within a web page context
##### 1. Include micro-slider located in the dist folder
`html
`
##### 2. Add markup
`html
// These are the default class names for container/children
`
##### 3. Call micro-slider on document load
`html
`
Methods
##### Go to Next / Previous Slide
`javascript
var slider = new MicroSlider(...);
// This would make the slider move onto the next element
document.getElementById('next').addEventListener(function (e) {
slider.next();
});
// This would make the slider move onto the previous element
document.getElementById('previous').addEventListener(function (e) {
slider.previous();
});
`
##### Go to Slide
`javascript
// This would set the slider to the 3rd element.
var slider = new MicroSlider(...);
slider.set(3);
`
$3
Here is the list of available values to customize how your slider is going to work:
- activeItemClass: Class appended to the active item.
- fullWidth: The carousel can be in full width mode which removes the 3d perspective and makes it flat.
- indicators: Optional indicators to show which slide you are one.
- indicatorActiveClass: Class appended to the active indicator item.
- indicatorContainerClass: Class appended to the indicator container.
- indicatorContainerTag: Indicator container element tag.
- indicatorItemClass: Class appended to the indicators.
- indicatorItemTag: Indicator element tag.
- noWrap: Whether the carousel items continuously wrap around or not.
- onCycleTo: Callback function for when the carousel has cycled to the next element.
- padding: Padding between items.
- perspectiveFactor: Height of carousel item multiplied by perspective factor will be the perspective of the carousel.
- shift: Carousel item offset.
- sliderClass: Class appended to carousel item container.
- sliderItemClass: Class appended to carousel items.
- sliderWrapperClass: Class appended to carousel wrapper.
- transitionDuration: Transition duration in milliseconds.
- zoomScale: Carousel perspective zoom scale.
$3
`js
{
activeItemClass: 'active',
fullWidth: false,
indicators: false,
indicatorActiveClass: 'active',
indicatorContainerClass: 'indicators',
indicatorContainerTag: 'ul',
indicatorItemClass: 'indicator',
indicatorItemTag: 'li',
indicatorText: '•',
initializedClass: 'initialized',
noWrap: false,
onCycleTo: null,
padding: 0,
perspectiveFactor: 1.25,
scrollingClass: 'scrolling',
shift: 0,
sliderClass: 'micro-slider',
sliderItemClass: 'slider-item',
sliderWrapperClass: 'slider-wrapper',
transitionDuration: 250,
zoomScale: -100,
}
`
API
$3
- next() Switches displaying item to the next one.
- prev() Switches displaying item to the previous one.
- set(index) Changes image to a given index value.
- detach() Destroy the slider instance
- toggleFullWidth(true|false, itemWidth = 320, itemHeight = null) Toggle the slider fullWidth option on the fly. When toggling fullWidth off you need to provide the new item width (int) in pixels, optionally you can provide a new item height (int)` in pixel also.