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)
OFFON
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
OFFON
Miscellaneous
Enable / disable autostart navigation
OFFON
Delay image loading. Images outside of view will be loaded on demand
OFFON
CSS3 Animation Easing. See cubic-bezier.com

Apply settings

Magic Scroll - Settings WizardAll Star PlaidMagic Scroll - Settings WizardAll Star GreenMagic Scroll - Settings WizardAll Star TartanMagic Scroll - Settings WizardAll Star PinkMagic Scroll - Settings WizardAll Star BlackMagic Scroll - Settings WizardAll Star OrangeMagic Scroll - Settings WizardAll Star CharcoalMagic Scroll - Settings WizardAll Star NavyMagic Scroll - Settings WizardAll Star Red
<div class="MagicScroll">
    <a><img src="..."></a>
    <a><img src="..."></a>
    ...
</div>
<script>
var MagicScrollOptions = {
}
</script>

Also see more examples and the integration guide.