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

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>

Browser support

• Firefox
• Chrome
• Edge
• Safari, iOS Safari

Development

yarn start

Contributions

Pull requests or issues are very appreciated.

License

MIT license

© 2018 José Luis Quintana