noodle
Tiny flickable slideshow. 1.8kb gzipped.
Usage
Markup
The immediate children of the slideshow element will be transformed into slides.
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.
const slider =
Options
noodle
accepts a single options object
as its second parameter.
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
settle
Fired after the slider settles to its active index.
slider
Properties
index
sliderindex // => 3
API
on(event, callback)
slider
index
Return the current index.
sliderindex // => 0
select(index)
slider
prev()
slider
next()
slidernext
resize()
Recalculate slider height and slides position. Use this if the DOM updates or after images load.
slider
destroy()
slider
init()
Re-initialize a destroyed slideshow.
slider
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