Mobile-first Horizontal Slider With Pure JavaScript – slim-slider

slim-slider is a responsive, touch-enabled slider plugin designed mainly for mobile webpages.

Key features:

• Supports both mouse drag and touch swipe events. (Based on hammer.js).
• Configurable animation speed and direction.
• Navigation buttons and pagination bullets.

Installation:

# Yarn
yarn add slim-slider
# NPM
$ npm install slim-slider

How to use it:

Import the main style sheet and JavaScript file into the document.

<link rel="stylesheet" href="main.css">
<script src="build.js"></script>

Insert your own images to the slim slider.

<div class="slim-slider">
  <div class="slim-slides">
    <div class="slim-slide">
      <img src="1.jpg">
    </div>
    <div class="slim-slide">
      <img src="2.jpg">
    </div>
    <div class="slim-slide">
      <img src="3.jpg">
    </div>
  </div>
</div>

Initialize the slider by create a new SlimSlider object as this:

let Slider = new SlimSlider()

Config the slim slider by pass the following options to the Slimslider().

let Slider = new SlimSlider({
    // transition delay between slides
    timing : 400,
    // selector of child slides
    childsClassName : '.slim-slide',
    // 'rtl' or 'ltr'
    dir: 'ltr', 
    // refer to hammerjs docs
    threshold: 10, 
    // show/hide navigation buttons
    showButtons:false,
    // infinite looping
    infinite:false, 
    // show/hide pagination bullets
    showPointers : true,
    // show/hide thumbnails
    showThumbnails:true,
    // enable/disable autoplay
    autoPlay: false,
    // autoplay interval
  autoPlayTimer: 3000,
    // how many items per slide
    itemsPerSlide : 1
    
})

Navigate between slides manually.

Slider.goToNext()
Slider.goToPrevious()

Execute a function when the slide changes.

Slider.addEventListener('after.slim.slide', (e) =>  {
  console.log(e) 
});

Changelog:

03/20/2023

• v1.3.2: Bugfix

09/22/2018

• v1.3.1: Added more options & API.

09/22/2018

• v1.3.1: Added more options & API.