Compatibility:

WebSite X5 Evo and Pro

An image that breaks into panels, each one sliding away to reveal the next. The effect is dynamic, scenic, almost cinematic. And that’s exactly the strength of the Sliding Panel Optional Object: turning a simple image sequence into an animated, impactful gallery. You can use it to add rhythm to a homepage, showcase products or create a more engaging photo gallery. The transitions do all the work — you just have to choose the images and let yourself be inspired.


Want to see the effect in action? Take a look at the examples shown on the Preview page.



How it works

The Sliding Panels Object works in a very simple yet effective way: all the images added to the gallery are automatically divided into as many panels as there are images. For example, if you insert 5 images into the gallery, each one will be "sliced" into 5 panels.


Each panel corresponds to one of the images, and when clicked, it triggers the animated transition that displays the associated image. To make the interface clearer, the panels can be numbered.


This makes the interaction immediate and engaging.


Create the image list

Now that you know the effect you can achieve, start building your gallery by defining the list of images to display:

  • Double-click the Sliding Panel Object to access the window with all the options.
  • Click the Add button to import your photos and videos. By clicking the arrow on the Add button, you can choose whether to search for a local file or use an online library (for more information, see How do I import a file?). The imported files make up a list that you can freely sort and edit.
#tip – Multi-selection. Hold down the CTRL key and click all the files you want to select to import them in a single step.
  • With the buttons  you can choose whether the image previews in the list should be displayed in small or medium size, making it easier to work.
  • Once the list is created, you can edit it at any time: you can add new images, delete those no longer needed, or rearrange them. Simply select the image from the list and click  to remove it, or use the arrow buttons to move it.
  • Similarly, for each inserted image/video, you can use the button to add a Title and Alternative Text useful for accessibility and for SEO optimization (see Image accessibility: the importance of alternative text).


Define the gallery style

At this point, you can take care of some graphic aspects:

  • Start by defining the Effect with which the individual panels—into which the images are divided—should appear.
  • Now set the Maximum Size that the gallery can take on.
  • You can also define the Border Color to highlight the panel separation with a thin line in the color of your choice. If you don't want the division between panels to be immediately visible, leave the border color as transparent.
  • Enable the Show Numbers option so that each panel into which the image is divided is automatically numbered: this will make it easier to see where to click to navigate between images.
  • Finally, if you choose to display numbers on the panels, you can define two Background Colors to style the numbers and differentiate the one related to the currently open image.


Eager to use it on your site pages? Install the Sliding Panel Object now


Don’t have enough Credits to purchase this Object? See all Credit packages