Rollerblade: Creating Interactive 360º Image Rotators

Rollerblade is plugin designed to create an interactive 360º image rotation. This plugin is great for online shops or product sales so that visitors can see an item from every angle before making a purchase.

Installation and setup of Rollerblade is not difficult if you follow the instructions:

  • First, include rollerblade.css at the top of your page with your CSS. Or, if the contents of that file are small, simply copy and paste the rollerblade.css contents into your main CSS file.
  • Rollerblade targets a container element with an image element inside that has the class of rollerblade-img. Make the src of the image the path to the first image in your rotator.
  • Make sure jQuery is included in your page, and then select the container element and call the rollerblade method.

Customize Rollerblade with several different options. You can increase or decrease the sensitivity of the rotator, determine whether the rotator is activated using drag, set up an manual or automatic rotation for the element and determine what should happen once a rotation is complete.

For something that looks complicated in action, Rollerblade is a simple to use option that can have stunning results on your website.