Carousel with Previous / Next controls to advance between items.
Bulleted indicators for number of items and currently-selected item. Click to advance between items.
Numbered pagination controls for each item, with flanking Previous / Next controls.
Previous and Next render as heads-up controls that display on hover events. Since hover events don't work on mobile, simply swipe to advance.
Image carousel containing textual captions with simple Previous / Next controls to advance between items.
How
many
roads
must
a
Items can be stretched to fit the viewport, or they can be sized individually like in this example.
In this example, we've used the included .m-card-light class to give the element a background and border.
You will have to to size the element or it's content yourself.
Blossoms
Glacier
Helmets
Parliament
Pods
Display the current item larger than the rest, and animate the transition between each with the .m-scaled class.
Blossoms
Fox Glacier
Helmets
Parliament
Pods
Doesn't animate when we move between items. Can use this to
initialize scooch to a different item than the first. Either
initializes scooch with {animate:false} or call move
$('.m-scooch').scooch('move', 8, {animate:false})
Blossoms
Glacier
Helmets
Parliament
Pods
Arbitrary content carousel with simple Previous / Next controls to advance between items.
We used the included class .m-card-dark to give each element a background.
These elements are automatically sized by the .m-fluid class to be full width.
When you're at the first or last items, Scooch disables the appropriate controls
Blossoms
Fox Glacier
Helmets
Parliament
Pods
Carousel with infinite items (repeated).
Carousel with infinite items that autoplays every 3 seconds until interacted with.
Finite carousel with hiding arrows that autoplays every 3 seconds until interacted with.
Finite carousel with hiding arrows that autoplays every 3 seconds forever (will always appear infinite).