How will your carousel look?

Works on iPad, iPhone, Android and all other devices & browsers

  • Experiment with a free trial before you buy
  • Tweak the speed, direction, effects, arrows & more.

Install | Download

Relied upon by BlueVoda website owners, Magic Scroll has been the professional choice since 2011 for outstanding carousel effects.

This BlueVoda image tool makes it easy to apply these effects to your pages.

With free new versions regularly released, your images will always look gorgeous with Magic Scroll.

Installation

  1. Download Magic Scroll (free and fully functional demo version).
  2. Unzip the file on your computer and FTP the magicscroll folder to your BlueVoda directory (on your server), keeping the file and folder structure intact.
  3. Within BlueVoda Website Builder, open the page you wish to edit.
  4. Add Magic Scroll CSS anf JS file reference to Between Head Tag

    View the Page HTML (right click an empty part of page) and under BETWEEN HEAD TAG enter the location of the CSS and JS files e.g.

    <link href="foldername/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="foldername/magicscroll.js" type="text/javascript"></script>
    
  5. On the web page, put an HTML box the size of your carousel. Double click it to open the box and enter the code e.g.

    <div class="MagicScroll">
     <a href="/page-1/"><img src="example1.jpg"/></a>
     <a href="/page-2/"><img src="example2.jpg"/></a>
     <a href="/page-3/"><img src="example3.jpg"/></a>
     <a href="/page-4/"><img src="example4.jpg"/></a>
     <a href="/page-5/"><img src="example5.jpg"/></a>
     <a href="/page-6/"><img src="example6.jpg"/></a>
    </div>
    
  6. Preview your page and check whether any adjustment is needed to the HTML box.
  7. Customize Magic Scroll how you want. Choose from a variety of options, then simply add the HTML code to your HTML box. Check out examples for inspiration of how Magic Scroll can look.
  8. Publish the page when you are ready.
  9. Buy Magic Scroll To upgrade your free and fully functional trial version of Magic Scroll (which removes the "Trial version" text), buy Magic Scroll or get a free Magic Scroll license (for non-commercial sites such as personal blogs and charities). Then overwrite the demo magicscroll.js file with the one from your licensed version.

Uninstallation

Thanks for trying Magic Scroll on your BlueVoda site! What did you hope Magic Scroll could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Within BlueVoda Website Builder, open the page you wish to edit.
  2. On the web page, double click the HTML box and delete the MagicScroll code, e.g.

    <div class="MagicScroll">
     <a href="/page-1/"><img src="example1.jpg"/></a>
     <a href="/page-2/"><img src="example2.jpg"/></a>
    </div>
    
  3. View the Page HTML (right click an empty part of page) and under BETWEEN HEAD TAG delete the location of the CSS and JS files e.g.

    <link href="foldername/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="foldername/magicscroll.js" type="text/javascript"></script>
    
  4. Delete the magicscroll folder from your BlueVoda website.
  5. Magic Scroll is now uninstalled.

FAQ

  1. Can I change background colour of carousel?

    Yes! By default, the Carousel & Cover-Flow modes use a grey/black background colour. You can change the Hex Colour to anything you want. With over 16,000 hex colours available, you'll be spoilt for choice. Simply add the CSS code you need to the Magic Scroll CSS file.

    Carousel background

    .MagicScroll[data-mode="carousel"] {
        background-color: <your-colour>;
    }
    

    Cover-flow background

    .MagicScroll[data-mode="cover-flow"] {
        background-color: <your-colour>;
    }
    

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other BlueVoda extensions

Try our other great image effects!

Please contact us with any questions you have about installing our tools with BlueVoda Website Builder.

Thanks to Alien Dude on the BlueVoda forum for writing these instructions.