Noodle NPM | npm.io

noodle

Tiny flickable slideshow. 1.8kb gzipped.

Usage

Markup

The immediate children of the slideshow element will be transformed into slides.

<div id='slider'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Basically, it'll work out of the box without any CSS, but it'll look terrible. I recommend specifying the width of the slider, and the height and/or width of the slides. noodle will calculate its height based on the height of the first slide.

JavaScript

That's pretty much it.

import noodle from 'noodle'

const slider = noodle(document.getElementById('slider'))

Options

noodle accepts a single options object as its second parameter.

noodle(node, options)

setHeight

By default, noodle calculates slider height based on the active slide. To disable, set to false.

ally

Set to false to disabled the default behavior or focusing the slideshow and active slide after user interaction.

index

Set the initial active slide of the slideshow. Default: 0.

Events

select

Fired immediately on slide selection.

slider.on('select', index => {})

settle

Fired after the slider settles to its active index.

slider.on('settle', index => {})

Properties

index

slider.index // => 3

API

on(event, callback)

slider.on('select', index => {})

index

Return the current index.

slider.index // => 0

select(index)

slider.select(3)

prev()

slider.prev()

next()

slider.next()

resize()

Recalculate slider height and slides position. Use this if the DOM updates or after images load.

slider.resize()

destroy()

slider.destroy()

init()

Re-initialize a destroyed slideshow.

slider.init()

Inspiration

When it comes to slideshows, Flickity sets the bar. @metafizzy's article, Math Time: Resting Position was incredibly helpful, and I doubt I would have figured out the velocity maths without it.