Mobile-friendly Image Carousel/Scroller Library – sliderm.js

Preview:

Description:

sliderm.js is a touch-enabled carousel/slider/scroller component built with HTML, CSS, and JavaScript. It is responsive, customizable, and works on all modern browsers and mobile devices.

It is an ideal solution to showcase your Featured Images or Promo Offers to your website visitors in a neat, simple and elegant way.

Features:

• Image preloading.
• Swipe to scroll.
• Infinite scrolling.
• Show/hide controls.
• Responsive options.
• Preview a part of the previous and next item.
• Allows you to specify the number of images to show per view.

How to use it:

1. Install & download

# Yarn
$ yarn add sliderm
# NPM
$ npm i sliderm
2. Import the sliderm.js.

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

// Or Browser
<link rel="stylesheet" href="dist/css/sliderm.css" />
<script src="dist/js/sliderm.js"></script>

3. Add images to the sliderm container.

<div class="sliderm demo">
  <div class="sliderm__slider">
    <div class="sliderm__slides">
      <div class="sliderm__slide"><img src="1.jpg" /></div>
      <div class="sliderm__slide"><img src="2.jpg" /></div>
      <div class="sliderm__slide"><img src="3.jpg" /></div>
      ...
    </div>
  </div>
</div>

4. Generate a basic carousel from the images you just provided.

const sliderm = new Sliderm('.demo', {
      // ...
});

5. All available options to customize the carousel.

const sliderm = new Sliderm('.demo', {
      /**
       * Display the arrow buttons.
       *
       * @type {Boolean}
       */
      arrow: true,
      /**
       * Display the pagination, dot, dot, dots.
       *
       * @type {Boolean}
       */
      pagination: true,
      /**
       * Display the spinner when loading the slider.
       *
       * @type {Boolean}
       */
      spinner: true,
      /**
       * Slide column group or just single column group.
       *
       * @type {Boolean}
       */
      grouping: false,
      /**
       * Transform the slider into a carousel.
       *
       * @type {Boolean}
       */
      loop: true,
      /**
       * Preview a part of the previous and next item.
       *
       * @type {Boolean}
       */
      preview: false,
      /**
       * Make the slider responsive.
       *
       * @type {Boolean}
       */
      breakpoint: true,
      /**
       * Add support for mobile devices to touch left and right swipe.
       *
       * @type {Boolean}
       */
      touch: true,
      /**
       * Autoplay the carousel.
       *
       * @type {Boolean}
       */
      autoplay: false,
      /**
       * How many items per view
       *
       * @type {Boolean}
       */
      columns: 4,
      /**
       * The duration of transition.
       *
       * @type {Number}
       */
      duration: 1000,
      /**
       * The spacing between each item.
       *
       * @type {Number}
       */
      spacing: 10,
      
});

6. Events.

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