Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time

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 V1.2, with custom hooks and better performance. πŸ‘€ Follow me on Twitter to get the last news about Butter Slider: @ArmandSalle 🧈🧈🧈🧈


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=""></script>

<!-- ES6 with modules -->
<script src=""></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()


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.


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

<!-- Scripts -->
<script src=""></script>

Options with data attributes

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


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>

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



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


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


And if you want to init it again you can call init()like this


It works also with autoInit

const sliders = butterSlider.autoInit() // return an array of instances of sliders
sldiers.forEach((el) => {
  // or
You can’t perform that action at this time.