Slendr NPM | npm.io

Slendr

A responsive & lightweight slider for modern browsers.

Features

Written and tested entirely using Typescript.
Lightweight (just 2KB gzipped UMD)
Responsive (desktop and mobile) by default.
Modern browsers only. No more legacy browsers like IE10 or IE11 (but you can find it on v1.3 release).
High performance by Lighthouse audit.
CSS3 Hardware Acceleration
60fps animation.
Progressive images loading.
Highly customizable.
SASS support.

:tada: View demo on Codepen.

Install

yarn add slendr

NPM

npm install slendr --save

The UMD and style builds are also available on unpkg.

<link rel="stylesheet" href="https://unpkg.com/slendr/dist/slendr.min.css">
<script src="https://unpkg.com/slendr/dist/slendr.min.js"></script>

You can use the component via window.slendr

Usage

Include the base styles:

<link rel="stylesheet" href="https://unpkg.com/slendr/dist/slendr.min.css">

Styles: It can customize the bases styles via the SCSS file at slendr/dist/slendr.scss.

Define the markup:

<div class="slendr">
  <nav class="slendr-direction">
    <a href="#" class="slendr-prev"><i class="fa fa-angle-left"></i></a>
    <a href="#" class="slendr-next"><i class="fa fa-angle-right"></i></a>
  </nav>

  <nav class="slendr-control"></nav>

  <div class="slendr-slides">
    <section class="slendr-slide" data-slide-src="slide1.jpg"></section>
    <section class="slendr-slide" data-slide-src="slide2.jpg"></section>
    <section class="slendr-slide" data-slide-src="slide3.jpg"></section>
  </div>
</div>

Create the slider:

import { Slendr } from 'slendr'

const myslider = new Slendr({
  slideshow: true
})

myslider.on('move', (direction, index, element) => console.log(direction))

API

Options

Name	Type	Default	Description
container	String	`.slendr`	The container supports string query selector or HTMLElement.
selector	String	`.slendr-slides > .slendr-slide`	Query selector for slides.
animationClass	String	`.slendr-animate`	Class name for animation used in slider translation.
directionNavs	Boolean	`true`	Display the direction navs (arrow buttons).
directionNavPrev	String	`.slendr-prev`	Class name for previous arrow button.
directionNavNext	String	`.slendr-next`	Class name for next arrow button.
slideVisibleClass	String	`.slendr-visible`	Class name used for show the current slide.
slideActiveClass	String	`.slendr-active`	Class name used when some slide is active.
slideshow	Boolean	`true`	If slider should work like a slideshow.
slideshowSpeed	Int	`4000`	The slideshow speed (in milliseconds).
keyboard	Boolean	`false`	Activate the keyboard arrow navigation.
controlNavs	Boolean	`true`	Display the control navigation.
controlNavClass	Boolean	`.slendr-control`	Class name of control navigation.
controlNavClassActive	Boolean	`.slendr-control-active`	Class name for active control navigation.

Animation speed: It's defined via the animation class at style.scss. Feel free to use your own CSS timing function.

Methods

Name	Usage	Description
prev	`slendr.prev()`	Move to previous slide.
next	`slendr.next()`	Move to next slide.
move	`slendr.move(index)`	Move the slider by index.
play	`slendr.play()`	Play the slideshow.
pause	`slendr.pause()`	Pause the slideshow.

Events

Name	Usage	Description
move	`slendr.on('move', (direction, index, element) => {})`	Trigger when slider moves to previous or next slide.
prev	`slendr.on('prev', (index, element) => {})`	Trigger when slider moves to previous slide.
next	`slendr.on('next', (index, element) => {})`	Trigger when slider moves to next slide.
play	`slendr.on('play', (index) => {})`	Trigger when play the slideshow.
pause	`slendr.on('pause', (index) => {})`	Trigger when pause the slideshow.

Attributes

On demand attributes

These attributes can be created manually.

data-slide-src: Set the image source URL. After image loading, Slendr will place it as slide background via css background-image.

Slender doesn't depend on images necessarily to working. It can omit this attribute in any case.

<div class="slendr-slides">
  <section class="slendr-slide" data-slide-src="image1.jpg"></section>
  <section class="slendr-slide"></section>
  <section class="slendr-slide" data-slide-src="image2.jpg"></section>
</div>

Runtime attributes

These attributes are created by Slendr.

data-slides-length: Contains the length of slides.

<div class="slendr" data-slides-length="1000">...</div>

data-slide-index: Contains the slide index.

<section class="slendr-slide" data-slide-index="0" data-slide-src="image1.jpg">...</section>
<section class="slendr-slide" data-slide-index="1" data-slide-src="image2.jpg">...</section>