Settings wizard

Buy now  £29 Get support

Scroll
Speed (ms, 0 - manual)
Duration (ms):
Loop:
Step (numeric):
Direction:
Geometry
Scroll width ('auto' or numeric):
Scroll height ('auto' or numeric):
Item width ('auto' or numeric):
Item height ('auto' or numeric):
Items to show (numeric, 0 - manual):
Controls
Arrows:
Opacity of arrows (0-100):
Opacity of arrows on mouse over (0-100):
Slider:
Slider size (numeric or percent):

1. Choose your settings.
2. Click apply:

Your customised scroll and HTML are below.


Here's the code:

  1. <!-- link to magicscroll.css file -->
  2. <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
  3. <!-- link to magicscroll.js file -->
  4. <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  5. <!-- define Magic Scroll -->
  6. <div class="MagicScroll">
  7.     <a href="example1.html"><img src="images/shoes1.jpg" />Purple shoes</a>
  8.     <a href="example2.html"><img src="images/shoes2.jpg" />Silver shoes</a>
  9.     <a href="example3.html"><img src="images/shoes3.jpg" />Pink shoes</a>
  10.     <a href="example4.html"><img src="images/shoes4.jpg" />Black shoes</a>
  11.     <a href="example5.html"><img src="images/shoes5.jpg" />Cream shoes</a>
  12.     <a href="example6.html"><img src="images/shoes6.jpg" />White shoes</a>
  13.     <a href="example7.html"><img src="images/shoes7.jpg" />Blue shoes</a>
  14.     <a href="example8.html"><img src="images/shoes8.jpg" />Brown shoes</a>
  15.     <a href="example9.html"><img src="images/shoes9.jpg" />Zebra shoes</a>
  16.     <a href="example10.html"><img src="images/shoes10.jpg" />Checkered shoes</a>
  17.     <a href="example11.html"><img src="images/shoes11.jpg" />Tissular shoes</a>
  18.     <a href="example12.html"><img src="images/shoes12.jpg" />Gold shoes</a>
  19. </div>