Sliderm is a slider & carousel JavaScript library. The packed size of sliderm.js is less than 19 KB, lightweight but feature-rich.

• Dependency-free.
• Code quality check passed and fully tested with 100% coverage rate.
• Flexible, easy to extend by writing your own extensions.

Documentaion

• Website: https://sliderm.com
• Demo: https://sliderm.com/demo
• Try it yourself: JSFiddle / CodePen

Features

• Design for mobile devices:
  • Multiple breakpoints.
  • Touch to swipe.
  • Preview the edge of the previous and next slide items.
• Autoplay.
• Infinite loop.
• Slide grouping items or single one.
• and more... check out configuration options for more details.

Getting started

Install

npm install sliderm

Import

import Sliderm from 'sliderm';
import 'sliderm/src/assets/scss/index.scss';

Examples

The HTML makeup is required for intializing sliderm.

HTML

<div class="sliderm your-class-name">
  <div class="sliderm__slider">
    <div class="sliderm__slides">
        <div class="sliderm__slide"><img src="./demo/1.jpg" /></div>
        <div class="sliderm__slide"><img src="./demo/2.jpg" /></div>
        <div class="sliderm__slide"><img src="./demo/3.jpg" /></div>
        <div class="sliderm__slide"><img src="./demo/4.jpg" /></div>
        <div class="sliderm__slide"><img src="./demo/5.jpg" /></div>
    </div>
  </div>
</div>

JavaScript

const sliderm = new Sliderm('.your-class-name', {
  arrow: true,
  pagination: true,
  grouping: false,
  loop: true,
  preview: false,
  columns: 4,
  duration: 1000,
  spacing: 10,
  align: 'center',
});

sliderm.on('slide.start', () => {
  console.log('Just starting to slide!');
});

sliderm.on('slide.end', () => {
  console.log('The slider is stopped.');
});

The detailed demonstrations will be put on the official documentation website.

License

Author: Terry L. Sliderm's license in under MIT, you can do anything you want on using this JavaScript library.