Skip to content
1.5kb flickable slideshow
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

noodle

Tiny flickable slideshow. 1.5kb 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.

The Name

Many thanks to gentooist for allowing me to have the name noodle. Very kind of them!

License

MIT License © Eric Bailey

You can’t perform that action at this time.