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 add slendr
npm install slendr --save
The UMD and style builds are also available on unpkg.
You can use the component via window.slendr
Usage
Include the base styles:
Styles: It can customize the bases styles via the SCSS file at slendr/dist/slendr.scss
.
Define the markup:
Create the slider:
const myslider = slideshow: true myslider
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.
Runtime attributes
These attributes are created by Slendr.
data-slides-length
: Contains the length of slides.
...
data-slide-index
: Contains the slide index.
......
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