Skip to content

❗️PROJECT UNMAINTAINED❗️ 🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦

License

Notifications You must be signed in to change notification settings

armandsalle/butter-slider

Repository files navigation

🚨 ❌❌❌ 🚨

⚠️⚠️⚠️

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

Pull Requests Welcome Actions Status npm version

A [smooth, simple, lightweight, vanilla JS, no dependencies] drag and hold slider, made for easy setup.

Simple demo on CodeSandbox

Install

With NPM or Yarn

# With NPM
npm i --save butter-slider

# With Yarn
yarn add butter-slider

With a CDN

<!-- For Webflow or no bundle project (ES5, no ES6 modules) -->
<script src="https://unpkg.com/butter-slider"></script>

<!-- ES6 with modules -->
<script src="https://unpkg.com/butter-slider@latest/dist/bundle.esm.js"></script>

Imports and init

// With imports
import { CreateSlider, autoInit } from 'butter-slider'

const reallyCoolSlider = new CreateSlider(...)
const autoInitSlider = autoInit()
// 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

<div data-butter-container="myButterSliderName">
  <div data-butter-slidable="myButterSliderName">
    <slides />
  </div>
</div>

<!-- Scripts -->
<script src="https://unpkg.com/butter-slider@latest/dist/bundle.umd.js"></script>
<script>
  butterSlider.autoInit()
</script>

Options with data attributes

You can pass params with data-butter-NAME-options. You have access to 3 params : smoothAmount, dragSpeed and hasTouchEvent

<div
  data-butter-myButterSliderName-options="smoothAmount:0.15,dragSpeed:2.5,hasTouchEvent:false"
></div>

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.

<div class="progress">
  <div class="bar" data-butter-progress="myButterSliderName"></div>
</div>

Or with plain vanilla 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!

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

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

mySlider.init()

It works also with autoInit

const sliders = butterSlider.autoInit() // return an array of instances of sliders
sldiers.forEach((el) => {
  el.destroy()
  // or
  el.init()
})

About

❗️PROJECT UNMAINTAINED❗️ 🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •