butter-slider v1.1.7

Butter Slider

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

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

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()
})