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 the Add button to import the photos and videos that will make up the Gallery. By clicking the arrow on the Add button, you can choose whether to select a file from Local files or use an Online library (for more info, see How do I import a file?). The imported files will make up a list you can sort and edit freely.
#tip – Multi-selection. Hold down the CTRL key and click on all the files you want to select to import them all at once.
  • With the buttons  you can choose whether to display the image previews in small or medium size: this helps you work more comfortably.
  • Once the list of images is composed, you can edit it anytime: besides adding new images, you can delete the ones you no longer need or reorder them. Just select an image from the list and click  to remove it or use the arrow buttons to move it.
  • Likewise, for each inserted image/video, you can use the button to add a title and alternative text that is useful for accessibility as well as SEO optimization (see Image accessibility: the importance of alternative text).
  • 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.