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

Category: Javascript , Slider | September 22, 2018
Author:namshi
Views Total:306 views
Official Page:Go to website
Last Update:September 22, 2018
License:MIT

Preview:

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

Description:

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:

09/22/2018

  • v1.3.1: Added more options & API.

You Might Be Interested In:


Leave a Reply