joseluisq / slendr

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

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

slendr's Issues

Include CSS and SCSS files

Examples:
https://unpkg.com/slendr/dist/slendr.min.css
https://unpkg.com/slendr/dist/slendr.scss

Validate if slendr-control nav is not declared

When .slendr-control is not declared:

slendr.js:234 Uncaught TypeError: Cannot read property 'appendChild' of null

Optimize loading of images

For example adding some preloding hack.

• 9698f4e image:load event
• 9698f4e image:completed event

Control methods for `slideshow` mode

Future control methods for slideshow mode:

• Need to implement first the slideshowAuto option. #56
• play() - start/resume the slideshow.
• pause() - pause the slideshow.
• play event - when slideshow is payed.
• pause event - when slideshow is paused.

E.g.

const slider = Slendr({
  slideshow: true,
  slideshowAuto: true
})

slider.pause()
// or
slider.play()

An in-range update of emitus is breaking the build 🚨

Version 1.0.8 of emitus just got published.

Branch	Build failing 🚨
Dependency	emitus
Current Version	1.0.7
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As emitus is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v1.0.8

• UMD support
• CDN support
• Webpack library export
• Jest test suite

Commits

The new version differs by 2 commits .

• 77e862d Version 1.0.8
• 02d16de set main pkg and sign commit

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Add event handlers support

https://nodejs.org/api/events.html

React support

For example: react-slendr

• Now, in development process https://github.com/joseluisq/react-slendr

Active class for slendr-control nav items

For example: .slendr-control-active

Slider freeze

Expected Behavior

Should navigate to next/prev slide
...

Actual Behavior

Can't navigate to next/prev slide
...

Steps to Reproduce the Problem

1. Open page with slider with slideshow.
2. Activate another tab for some time (1-2min enough actually I think period of time between slides)

requestAnimationFrame is not called in most browsers when running in background tabs. So animating = true forever.

This code doesn't work any more after this:

function prev() {
if (animating)
return;
moveTo('prev');
}
function next() {
if (animating)
return;
moveTo('next');
}
function goTo(i) {
if (!animating && current !== i && (i >= 0 && i < slides.length)) {
moveTo(current - i < 0 ? 'next' : 'prev', i);
}
}

Specifications

Website

Create a website with documentation and examples using Github Pages.
Ref: #83

Fade transition effect

I could be a great feature! 🌟

Slide hidden when slendr has one slide

Slendr doesn't show the slide when has one slide.

Disable and hide navs when slides length is < 2

When slider contains one or neither slide navs are visible yet.

Add `slideshowAuto` option to auto starting

E.g.

const slider = Slendr({
  slideshow: true,
  slideshowAuto: true
})

Add more examples

It would be great to add these examples:

• Example using control navs with play and stop buttons.
• Examples using thumbnails.
• ...

Typescript support

An in-range update of emitus is breaking the build 🚨

Version 1.0.9 of emitus just got published.

Branch	Build failing 🚨
Dependency	emitus
Current Version	1.0.8
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As emitus is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 2 commits .

• d6e4a4e Version 1.0.9
• 8337b11 preserve src dir

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

An in-range update of node-sass is breaking the build 🚨

Version 3.12.2 of node-sass just got published.

Branch	Build failing 🚨
Dependency	node-sass
Current Version	3.12.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As node-sass is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

• ✅ continuous-integration/travis-ci/pr The Travis CI build passed Details

Release Notes

v3.12.2

Fixes

• Better handle fs error when during install (@xzyfer, #1799)

---

Supported Environments

OS	Architecture	Node
Windows	x86 & x64	0.10, 0.12, 1, 2, 3, 4, 5, 6,7
OSX	x64	0.10, 0.12, 1, 2, 3, 4, 5, 6, 7
Linux	x86 & x64	0.10, 0.12, 1, 2, 3, 4, 5, 6, 7
FreeBSD	i386 & amd64	0.10, 0.12, 1, 2, 3, 4, 5, 6

*Linux support refers to Ubuntu, Debian, and CentOS 5

Commits

The new version differs by 2 commits .

• 33fbd2b 3.12.2
• 59beffc Handle access error when writing binary to cache

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Touch support

Create the website with docs and examples

AMD support

Emitus dependency already has AMD support.

Drop out support for ES6+ polyfills

Main idea is to support modern compatible browsers with ES6+ with no polyfills in future releases, this also includes dependencies. Because the majority of ES6+ API is already supported by modern browsers.

Features that this library uses right now:

• Object.assign
• Arrow functions

Caveats:

• No more support for IE11 or lower versions.

An in-range update of eslint-plugin-import is breaking the build 🚨

Version 2.4.0 of eslint-plugin-import just got published.

Branch	Build failing 🚨
Dependency	eslint-plugin-import
Current Version	2.3.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

---

Commits

The new version differs by 10 commits.

• 44ca158 update utils changelog
• a3728d7 bump eslint-module-utils to v2.1.0
• 3e29169 bump v2.4.0
• ea9c92c Merge pull request #737 from kevin940726/master
• 8f9b403 fix typos, enforce type of array of strings in allow option
• 95315e0 update CHANGELOG.md
• 28e1623 eslint-module-utils: filePath in parserOptions (#840)
• 2f690b4 update CI to build on Node 6+7 (#846)
• 7d41745 write doc, add two more tests
• dedfb11 add allow glob for rule no-unassigned-import, fix #671

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

TypeError: undefined is not a function (evaluating 'Object.assign')

Add Babel Object.assign transform plugin.

Migrate current development stack in favor of Webpack

Migrate development stack in favor of Webpack module bundler

Browser support

Emitus dependency already has browser support.
For example usign Bower.

An in-range update of emitus is breaking the build 🚨

Version 2.0.1 of emitus just got published.

Branch	Build failing 🚨
Dependency	emitus
Current Version	2.0.0
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As emitus is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 4 commits .

• 78fb1bc 2.0.1
• 96a0489 update dependencies
• 93965c7 update dependencies
• 5dd1f2c export default

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Add Unit Testing

~> npm test

Cannot read property 'querySelector' of null

By default, if element with .slendr class doesn't exists Slendr throws:

> Uncaught TypeError: Cannot read property 'querySelector' of null
    at module.exports (slendr.js:28)

Add "setOption" method

E.g:

const slider = Slendr({
  slideshow: true
})

slider.setOption('slideshow', false)

Object.assign not working with IE11

https://github.com/joseluisq/slendr/blob/master/src/index.js#L12

Object.assign for IE11

IE11 needs another method to merge the data between the two objects because the method doesn't exist in this browser.

Support for markup syntax