Notwithstanding Precautions, Misadventure

    noodle

    1.8.1 • Public • Published

    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.

    The Name

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

    License

    MIT License © Eric Bailey

    Keywords

    none

    Install

    npm i noodle

    DownloadsWeekly Downloads

    14

    Version

    1.8.1

    License

    MIT

    Unpacked Size

    64.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • estrattonbailey