ivanSlider - Lightweight slider without dependencies

ivanSlider is a 3kb (gzipped) carousel with no dependencies and no styling.

Installation

npm i -S ivan-slider

Some markup.

<div class="ivanSlider">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

If you are using a module bundler like Webpack.

import IvanSlider from 'ivanSlider';

new IvanSlider();

Or manually inject the minified script into your website.

<script src="ivanSlider.build.js"></script>

<script>
  new IvanSlider();
</script>

Options

You can pass some options to the constructor.

new ivanSlider({
  selector: '.ivanSlider',
  slides: 1,
  current: 0,
  loop: false,
  vertical: false,
  threshold: 30,
  duration: 300,
  function: 'ease-out',
  onInit: () => {},
  onChange: () => {},
});

selector (string or DOM element)
The selector to use as a carousel. Slider will use all immediate children of this selector as a slider items. It can be a query string or DOM element.

vertical (boolean)
For vertical scrolling

duration (number)
Slide transition duration in milliseconds

function (string)
It is like a CSS transition-timing-function

slides (number or object)
The number of slides to be shown. It accepts a number or an object for complex responsive layouts.

slides: {
  800: 2, // 2 items for viewport wider than 800px
  1240: 3 // 3 items for viewport wider than 1240px
}

current (number)
Index (zero-based) of the starting slide

threshold (number)
Touch and mouse dragging threshold (in px)

loop (boolean)
Loop the slides around

onInit (function)
Runs immediately after initialization

onChange (function)
Runs after slide change

Methods

prev(slidesCount = 1)
Go to previous item

next(slidesCount = 1)
Go to next item