A carousel/slider-like component for sequentially displaying slides or sets of slides.
const Slider = ({ slideIndex }) => (
<div>
<Whirligig visibleSlides={3} gutter="1em" slideTo={slideIndex}>
<img src="http://www.fillmurray.com/400/300" />
<img src="http://www.fillmurray.com/300/400" />
<img src="http://www.fillmurray.com/400/200" />
<img src="http://www.fillmurray.com/200/400" />
<img src="http://www.fillmurray.com/500/300" />
</Whirligig>
</div>
)react-whirligig exposes next and prev functions for moving the track forward and
backward the number of visible slides. These functions can be accessed using the
ref prop callback to get a reference to the Whirligig instance.
import React from 'react'
import Whirligig from 'react-whirligig'
const Slider = () => {
let track
const next = () => track.next()
const prev = () => track.prev()
return (
<div>
<button onClick={prev}>Prev</button>
<Whirligig
visibleSlides={3}
gutter="1em"
ref={(_trackInstance) => { track = _trackInstance}}
>
<img src="http://www.fillmurray.com/400/300" />
<img src="http://www.fillmurray.com/300/400" />
<img src="http://www.fillmurray.com/400/200" />
<img src="http://www.fillmurray.com/200/400" />
<img src="http://www.fillmurray.com/500/300" />
</Whirligig>
<button onClick={next}>Next</button>
</div>
)
}See the demo code for advanced usage.
The Whirligig component is a horizontally oriented container of Slides.
default: noop
A function to be called after the track transitions to a new "active" slide. The function is passed the new "active" slide index.
default: 500
The number of milliseconds the slide animation should take.
default: noop
A function to be called before the track transitions to a new "active" slide. The function is passed what the new "active" slide index will be.
A string that will be applied as the class attribute.
default: easeOutQuint
A function which takes a float representing the percentage of time that has
passed for a given animation and returns a float representing the relative
progress of the element being animated. See
https://gist.github.com/gre/1650294 for examples.
default: false
A boolean flag that determines whether the track should wrap to the beginning/end when sliding beyond the slide index bounds.
default: 1em
A css length string that represents the space between each Slide in the Whirligig
default: ["ArrowRight"]
An array of valid "Key" values from a KeyboardEvent indicating what "Key" values, when pressed, should move the track forward.
default: ["ArrowLeft"]
An array of valid "Key" values from a KeyboardEvent indicating what "Key" values, when pressed, should move the track backward
default: false
A boolean flag that turns off/on the ability to natively scroll through the Whirligig
default: false
A boolean flag that turns off/on the ability to swipe through the Whirligig
default: visibleSlides or 1
The number of slides that should advance on a next, prev, or swipe action.
If not specified, will reflect the visibleSlides prop value or 1.
default: ''
A class to apply to the Slide container.
default: 0
The index to which the track should transition if it is not already there. This
is distinct from startAt in that startAt is only effective when the
component mounts and does not transition, but moves immediately to the given
slide. The slideTo prop is meant to be used as a mechanism for the consuming
component to directly control when and where the track transitions to.
default: false
A boolean flag that turns on/off the snap-to-slide feature. If set, the Whirligig will animate the final bit of scrolling to stop at a slide.
default: 0
The Slide index that will be the "active" slide when the Whirligig mounts. The value will be normalized to be within the range of the length of the Whirligig's children.
default: 1
The number of slides that should be visible at a time for the Whirligig
Advances the track to the next set of visible slides. If there are not enough
remaining slides to transition the full number of visible slides, it will
transition to the end of the track. If already at the end of the track, calling
next will transition the track to index 0
Recedes the track to the previous set of visible slides. If there are not enough
remaining slides to transition the full number of visible slides, it will
transition to the beginning of the track. If already at the beginning of the
track, calling prev will transition the track to last full set of visible
slides in the track.
- Authored by @uniqname
- Thanks @RachelTheRiveter for the name!
- Maintained by @jane