Compatibility:

WebSite X5 Evo and Pro

Merry-go-round horses can have a kind of hypnotic effect: one could stay there forever looking at them going round in circles. You can recreate the same nice effect setting up a carousel to display your most beautiful images by simply using the 3D Rotation Gallery Optional Object. Check out some examples on this Preview page.



How to set up a carousel

  • Double-click on the 3D Rotation Gallery Object you added on the page to open the settings window.
  • Click on the Add button to open the File Selection window and import the file for the first image you want to use. 
  • Do the same for all the images you need.
  • If necessary, use the Remove button to remove the selected file from the list of the images you imported, as well as the Move up and Move down buttons to rearrange the files.
  • Set the image Size in pixels.
  • Set the Radius, again in pixels, of the circumference the images will rotate on.
  • Choose the image rotation Speed. 
  • Possibly activate the Reflection option to add a reflection under each image. 


How to add links on the images

  • Select the image you want to work on from the Image List.
  • Click on the button to open the Link window and select the action you want to perform.
  • Do the same for all the images you want to add a link on.

By hovering the mouse on the images, the carousel will stop, so the users can click to open the associated link. 


Notes for a better result

The carousel images are displayed with the correct perspective. They are displayed in their real size, which is the one you set with the Size option, when they complete their round and go into the background. When they are displayed in the foreground, on the other hand, they are enlarged. 


The size of the Layout-Grid cell, and therefore of the space dedicated to the Object on the Page, is then determined by the real size of the images. It could then happen, that the enlarged images partially overlap the contents placed before and/or after them.



Sometimes this effect may look nice, but if it's not the case, you can avoid this by increasing the space separating the 3D Rotation Gallery Object from the one you set before/after it. A possible solution is working on margins:   

  • Select the Layout-Grid cell you added the 3D Rotation Gallery Object in. 
  • Click on the Margins option you find in the toolbar above the Grid, so to open the Margin and Alignment window.
  • Increase the inner and/or outer margin values until you get the wished result. You can check out the changes applied using the local Preview. In the following example, we just increased the outer upper and lower margins from 10px to 60px. 

The space between the images varies according to the space the Object takes up on the Page, the number of images you added and the size you set for the images themselves, as well as the radius of the circumference the images rotate on. If you want to modify this space, you then need to consider how to work on the mentioned parameters. 


Are you curious to use this Object on your website pages? Install 3D Rotation Gallery now.


You don't have enough Credits to buy this Object? Check out our Credit Packs.