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.

🎉 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