Skip to content
This repository has been archived by the owner on Jul 25, 2022. It is now read-only.
/ slendr Public archive

A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]

License

Notifications You must be signed in to change notification settings

joseluisq/slendr

Repository files navigation

Slendr npm npm Build Status JavaScript Style Guide

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 Jose Quintana