Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/armandsalle/butter-slider
❗️PROJECT UNMAINTAINED❗️ 🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦
https://github.com/armandsalle/butter-slider
Last synced: 9 days ago
JSON representation
❗️PROJECT UNMAINTAINED❗️ 🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦
- Host: GitHub
- URL: https://github.com/armandsalle/butter-slider
- Owner: armandsalle
- License: mit
- Created: 2020-04-29T21:01:49.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:54:57.000Z (almost 2 years ago)
- Last Synced: 2024-08-05T09:14:41.997Z (4 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/butter-slider
- Size: 11 MB
- Stars: 208
- Watchers: 7
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🚨 ❌❌❌ 🚨
⚠️⚠️⚠️
Butter Slider is no more maintained! Please use another slider tool or fork it and tweak it. The code is not good and performances are bad, but it was fun to do
⚠️⚠️⚠️
🚨 ❌❌❌ 🚨
# Butter Slider
[](http://makeapullrequest.com) [](https://github.com/armandsalle/Slider/actions) [](https://www.npmjs.com/package/butter-slider)
A [smooth, simple, lightweight, vanilla JS, no dependencies] drag and hold slider, made for easy setup.
Simple demo on [CodeSandbox](https://codesandbox.io/s/butter-slider-demo-rwxwi)
## Install
With NPM or Yarn
```
# With NPM
npm i --save butter-slider
# With Yarn
yarn add butter-slider
```
With a CDN
```html
```
Imports and init
```js
// With imports
import { CreateSlider, autoInit } from 'butter-slider'
const reallyCoolSlider = new CreateSlider(...)
const autoInitSlider = autoInit()
```
```js
// Without imports
const reallyCoolSlider = new butterSlider.CreateSlider(...)
const autoInitSlider = butterSlider.autoInit()
```
## Usage
There are 2 ways to use it. With pure javascript or with data-attributes directly on your HTML.
### With data-attributes and auto init
`autoButter` can be used only with data attributes and return an array with your sliders in it.
For auto init to works you need `data-butter-container` and `data-butter-slidable`. Value passed on the two data attributes need to be the same to works.
**Required**
```html
butterSlider.autoInit()
```
**Options with data attributes**
You can pass params with `data-butter-NAME-options`. You have access to 3 params : **smoothAmount**, **dragSpeed** and **hasTouchEvent**
```html
```
**Progress bar**
If you want a simple progress bar add `data-butter-progress` on the element you want to anime with ease the width with the scroll amount.
```html
```
### Or with plain vanilla js
```js
// ES6 way
import { CreateSlider } from 'butter-slider'
const mySlider = new CreateSlider({
container: '.slider-container', // Where to listen events
slider: '.slider-items', // What to move
})
// No modules way
const mySlider = new butterSlider.CreateSlider({
container: '.slider-container', // Where to listen events
slider: '.slider-items', // What to move
})
```
## Options
**Params**
| Name | Type | Default | Required | Description | Data-atributes |
| ---------------- | ---------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- | -------------- |
| container | string, DOM element | - | YES | Where to listen events | YES |
| slider | string, DOM element | - | YES | What to move | YES |
| dragSpeed | number, string | 1.00 | - | Amount of speed. Can be a float number | YES |
| smoothAmount | number, string | 0.15 | - | Amount of smooth. Can be a float number | YES |
| hasTouchEvent | bool | False | - | Touch devices have already a hold and drag slider built-in.
But if you want to use Butter Slider instead you can. | YES |
| mouseEnter | function | - | - | Call when mouse enter the container. Usefull for cursor effect. | - |
| mouseDown | function | - | - | Call when click in the container. Usefull for cursor effect. | - |
| mouseUp | function | - | - | Call when release the click in the container. Usefull for cursor effect. | - |
| getScrollPercent | function => value in percent | - | - | Call on every frame with the amount of scroll in percent (between 0 and 100). Usefull for custom progress bar. | - |
| setRelativePosition | function => value in pixel | - | - | If you want to use custom arrows to move the slider, this method is for you. But keep in mind, you need to code your own logic. | - |
**Functions**
If you want to use arrows, or move the slider by a specif distance, use setRelativePosition!
```js
const myArrowTag = document.querySelector('.myArrow')
const mySlider = new butterSlider.CreateSlider({
container: '.slider-container', // Where to listen events
slider: '.slider-items', // What to move
})
// Each time the arrow is click, the slider will move to 500px
myArrowTag.addEventListener('click', () => {
mySlider.setRelativePosition(500)
})
```
If you want to destroy your slider you can cann `destroy()`methods like this
```js
const mySlider = new butterSlider.CreateSlider({
container: '.slider-container', // Where to listen events
slider: '.slider-items', // What to move
})
mySlider.destroy()
```
And if you want to init it again you can call `init()`like this
```js
mySlider.init()
```
It works also with autoInit
```js
const sliders = butterSlider.autoInit() // return an array of instances of sliders
sldiers.forEach((el) => {
el.destroy()
// or
el.init()
})
```