Skip to content

🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦

License

Notifications You must be signed in to change notification settings

trst/butter-slider

Β 
Β 

Repository files navigation

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

News πŸ“°

I'm currently working on the V2, with custom hooks and better performance. πŸ‘€ Follow me on Twitter to get the last news about Butter Slider: @ArmandSalle 🧈🧈🧈🧈

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. -

Functions

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

🧈 Butter is a simple drag and hold slider. With 0 dependencies 🍦

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 66.8%
  • JavaScript 33.2%