Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joseluisq/slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
https://github.com/joseluisq/slendr
component javascript modern-browsers slide slider slideshow typescript
Last synced: about 2 months ago
JSON representation
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
- Host: GitHub
- URL: https://github.com/joseluisq/slendr
- Owner: joseluisq
- License: mit
- Archived: true
- Created: 2016-03-28T04:51:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-12-17T07:54:07.000Z (almost 5 years ago)
- Last Synced: 2024-04-14T05:36:22.918Z (7 months ago)
- Topics: component, javascript, modern-browsers, slide, slider, slideshow, typescript
- Language: TypeScript
- Homepage: http://codepen.io/joseluisq/full/wGXaKx/
- Size: 1.27 MB
- Stars: 38
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Slendr [](https://www.npmjs.com/package/slendr) [](https://www.npmjs.com/package/slendr) [](https://travis-ci.org/joseluisq/slendr) [](http://standardjs.com/)
> A responsive & lightweight slider for modern browsers.
## Features
- Written and tested entirely using [Typescript](http://www.typescriptlang.org/).
- 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](https://github.com/GoogleChrome/lighthouse) audit.
- [CSS3 Hardware Acceleration](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)
- 60fps animation.
- Progressive images loading.
- Highly customizable.
- SASS support.
:tada: View demo on [Codepen](http://codepen.io/joseluisq/full/wGXaKx/).
## Install
[Yarn](https://github.com/yarnpkg/)
```sh
yarn add slendr
```
[NPM](https://www.npmjs.com/)
```sh
npm install slendr --save
```
The [UMD](https://github.com/umdjs/umd) and style builds are also available on [unpkg](https://unpkg.com).
```html
```
You can use the component via `window.slendr`
## Usage
Include the base styles:
```html
```
__Styles:__ It can customize the bases styles via the SCSS file at [`slendr/dist/slendr.scss`](https://unpkg.com/slendr/dist/slendr.scss).
Define the markup:
```html
```
Create the slider:
```js
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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-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.
```html
```
#### Runtime attributes
These attributes are created by Slendr.
__`data-slides-length`__: Contains the length of slides.
```html
...
```
__`data-slide-index`__: Contains the slide index.
```html
...
...
```
## Browser support
- Firefox
- Chrome
- Edge
- Safari, iOS Safari
## Development
```sh
yarn start
```
## Contributions
[Pull requests](https://github.com/joseluisq/slendr/pulls) or [issues](https://github.com/joseluisq/slendr/issues) are very appreciated.
## License
MIT license
© 2018 [Jose Quintana](http://git.io/joseluisq)