component / swipe

Swipe component with touch support (for image carousels, dynamic content etc)

Swipe

Swipe component with touch support, for image carousels or any other content. Try it out the demo in your browser or on your device.

Installation

$ component install component/swipe

Events

• showing (i, pane): when the transition to another pane begins
• show (i, pane): when the transition to another pane finishes

API

Swipe(el)

Create a swipe object for el. This should be a container element that wraps a list of several items. View ./example.html for a working example.

.threshold(n)

Set the swipe threshold to n.

This is the factor required for swipe to detect when a slide has passed the given threshold, and may display the next or previous slide. For example the default of .5 means that the user must swipe beyond half of the side width.

.fastThreshold(ms)

Set the "fast" swipe threshold to ms.

This is the amount of time in milliseconds which determines if a swipe was "fast" or not. When the swipe's duration is less than ms only 1/10th of the slide's width must be exceeded to display the previous or next slide.

.duration(ms)

Set the transition duration, defaults to 300ms.

.interval(ms)

Set the cycle interval, defaults to 5000ms.

.refresh()

This method should be invoked when the swipe element has been resized, or an item has been added or removed.

.play()

Play through all items using the cycle interval.

.stop()

Stop playing.

.isFirst()

Is on the first visible item.

.isLast()

Is on the last visisble item.

.prev()

Show the previous item if present, or do nothing.

.next()

Show the next item if present, or do nothing.

.show(i, [ms], [options])

Show item with the given index i with the given transition in ms defaulting to the .duration() value.

You may pass { silent: true } as an option to silence show events.

License

MIT

swipe's Issues

swipe should defer feature detection using has-translate3d until 1st usage

Due to the immediate feature detection we are unable to load swipe in a webpack vendor chunk async in the head, this might be remedied by postponing feature detection until 1st usage.

This would be a more frequent usecase when http2 push supports get broader as we are able to serve assets already before content.

Dragging with mouse

On the example website, dragging the images with the mouse cursor is possible. The actual component does not allow that though.

I've gone through the code, and found that it's because of the use of e.changedTouches.

Why has the possibility to drag with mouse been completely removed? Are there any plans to implement it again (or could I submit a pull request) or has it been removed on purpose (for example to allow text selection).

IMO the best solution would be to make it optional, so carousels with lots of text can still be selectable, whereas big hero units aren't.

mocha tests

Demo in gh-pages doesn't use 'swipe', but 'carousel'

rename to swipe? swipeable?

dependency error

error : failed to lookup "component-swipe"'s dependency "component-events"

unbind should also stop swipe

right now unbind doesn't really work.

zoom causes pane to flow under

most likely some subpixel ish.

add vertical demo

add easing function option

add acceleration based on touchend delta

ignore when touches.length > 1

? setting?

abstract swipe portion into its own component

only apply resistance in one direction for first/last

currently both directions making it hard to swipe the first / last