micro-slider

https://github.com/lgse/micro-slider

Lightweight, Responsive, Touch Friendly, Dependency-Free JavaScript Slider with Hardware Accelerated Transitions.

About

micro-slider is a lightweight carousel library with hardware accelerated transitions.

Features

• Responsive
• Touch Friendly for Mobile Devices
• Small size, less than 12kb minified/gzipped
• Support to RequireJS/CommonJS and global definition
• Uses requestAnimationFrame for animations

Demo

https://lgse.github.io/micro-slider

Install

npm install --save micro-slider

Usage within a Webpack / Gulp context

You can import it using either require or import syntax:

// 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

<link rel="stylesheet" href="micro-slider.css">
<script type="text/javascript" src="micro-slider.min.js"></script>

2. Add markup

// These are the default class names for container/children
<div class="micro-slider">
  <div class="slider-item"></div>
  <div class="slider-item"></div>
  <div class="slider-item"></div>
</div>

3. Call micro-slider on document load

<script type="text/javascript">
window.onload = function () {
  // You can use any CSS selector to instantiate the slider
  // You can also pass it an HTML Element
  new MicroSlider('.micro-slider', {...options...});
}
</script>

Methods

Go to Next / Previous Slide

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

// This would set the slider to the 3rd element.
var slider = new MicroSlider(...);
slider.set(3);

Available Options

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.

Default values

{
  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

Available methods:

• 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.

License

MIT © LGSE Ltd.