noodle
v0.1.2noodle
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.
The Name
Many thanks to gentooist for allowing me to have
the name noodle
. Very kind of them!
License
MIT License © Eric Bailey
Metadata
- MIT
- Whatever
- estrattonbailey
- released 6/3/2018