Compatibility:

WebSite X5 Evo and Pro

Can't get enough of image galleries and sliders? Neither do we. The curiosity is so great, we are always looking for new solutions to make the images of our websites stand out.


You can get a really effective slider using the Coverflow Optional Object. This tool creates the effect of a 3D cover carousel scrolling horizontally. Check out the Preview page and find out what you can achieve using this Object.



The slider created with the Coverflow Object can then include as many images as you want, but they will be displayed only 3 at a time: there will be a central image in foreground (see picture no. 2 below), together with a previous (see picture no. 1 below) and a following one (see picture no. 3 below). You will be able to scroll the images horizontally forward and backward, bringing each time a different image in central position.


How to set up the carousel

  • Double-click on the Coverflow Object you added on the page to open the settings window.
  • In the List section, 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. Alternatively, you can manually move the thumbnails to the wished position.

How to customize the carousel

  • Open the Style section and define the reported Settings. You can work on:
    • the Width of each image and the Offset from one to the other;
    • the Depth, to specify how much the lateral images should appear to be shifted backward from the main one;
    • the Rotation, and define whether the lateral images must be set flat (like the central image) or if and by how much they should be rotated on their vertical axis;
    • the Scale, i. e. the ratio of the lateral images size to the one of the central image. If for instance you set the Scale to 1, all the images will have the same size. If you, on the other hand, set the Scale to 0.5, the lateral images will be half as big as the central one.
  • Among the other Settings, you will also find the Emphasis option: use it to accentuate (by setting a value above 1)  or tone down (by settings a value below 1) the settings you have previously defined.     
  • You can now move on to the Style. You can decide whether the following elements should be displayed or not:  
    • the Shadow for the lateral images;
    • the Reflection underneath all the carousel images;
    • the Navigation commands and the Navigation bullets, which are useful to scroll the images: for both elements, you can define the Size and Colors.
  • Finally, you can activate the Start from central slide option, so to have the central image from the list of imported files displayed as first central image when opening the gallery.


How to add descriptions and links on the images

You can easily optimize each image added to the Coverflow Object:

  • Go back to the List section and select the thumbnail of the image you want to work on, then click on   Description.
  • In the following window, use the available fields to report a Description, a Title and an Alt Text: all details that can help optimize the image SEO.


You can also add links to the images:

  • Select the thumbnail and this time click on Link.
  • On the following window, select the wished option and click OK.


Repeat these steps for all the images you want to add a description and/or a link for. The images you have already worked on will be marked with an icon similar to the one used for the command buttons.



Are you curious to use this Object on your website pages? Install Coverflow now


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