Build your perfect Magic Scroll

Scroll
Choice of scroll effects
Direction of scroll
Number of items to show (auto | fit | number | array)

You can preset the number of visible items depending on the width of scroll view.

Format: [ [x,y], [x,y], ... ]
x - maximum scroll width, y - items to display.

Example: [ [600,2], [800,3], [1000,5], [1200,7], [1500,10] ]
Number of items moved on each scroll (auto | numeric)
Scroll speed (milliseconds)
Time between each scroll (milliseconds). 0 = disable autoplay.
Scroll in loop, rewind to the first item after the last or stop at the last item
Width of entire scroll area (auto | <pixels> | <percentage>)
Height of entire scroll area (auto | <pixels> | <percentage>)
Navigation
Show arrows inside, outside or hidden
Show pagination (bullets)
auto - automatically turn off scrolling on mouse wheel in the scroll and animation modes, and enable it in carousel and cover-flow modes.
Enable / disable keyboard navigation
Miscellaneous
Enable / disable autostart navigation
Delay image loading. Images outside of view will be loaded on demand
CSS3 Animation Easing. See cubic-bezier.com

Apply settings

Magic Scroll - Settings WizardAll Star Plaid Magic Scroll - Settings WizardAll Star Green Magic Scroll - Settings WizardAll Star Tartan Magic Scroll - Settings WizardAll Star Pink Magic Scroll - Settings WizardAll Star Black Magic Scroll - Settings WizardAll Star Orange Magic Scroll - Settings WizardAll Star Charcoal Magic Scroll - Settings WizardAll Star Navy Magic Scroll - Settings WizardAll Star Red
Also see more examples and the integration guide.