Display large-format images in an image slider

The Image slider displays several large-format images in sequence. Use it to highlight areas of your website, such as a product category. You can also add text and links to each image.

Note

Ensure images display correctly on all devices. Your website is responsive, so the design automatically adapts to the device in use. For further information refer to Learn about responsive design.

How to add an image slider

Follow these steps to add an image slider to a page and upload images:

1. In the sidebar of your cockpit, navigate to Editor.
   The Editor opens.
2. Navigate to Pages.
3. Select the page to edit or add a new page.
   A preview of the page opens on the right-hand side.
4. Navigate to Content elements → Images or Gallery.
5. Drag the Image slider content element to the desired position.
   You can only drop content elements into the blue areas of the page.
6. Select Add images.
   The Add images view appears.

7. Drag an image onto the Add image field or select Add image. Either browse the Unsplash image library or upload an image from your device.

   Note

   You can assign up to five images to the slider.

8. Set the image alignment. You can either use the top , bottom , or middle as the centre of the image. For further information also refer to Align images in the image slider.
9. Optionally, enter Alternative text. This improves SEO, supports screen readers, and appears if the image cannot be displayed.
10. If you want to add texts to your image, make the respective settings on the tabs  and . For further information refer to Add text and links/buttons to images.
11. If you want to add more images to the slider, select the next empty slot in the small preview of the image slider at the top (1) and repeat steps 7-11.
12. Set the rotation speed under Images switch every ... seconds (2). The default is five seconds. You can choose a speed between one and ten seconds.
    
13. Optionally, activate the checkbox Keep aspect ratio on all devices to set a fixed aspect ratio for the images. For further information also refer to the section Keep a fixed aspect ratio on all devices.
14. Once you are done, select Save.

You have added the image slider to your website.

To edit the image slider, hover over it and select Edit. The Edit image slider view appears.

Info

For any content element, access additional settings from the blue bar that appears when you hover over it. For further information refer to Edit content elements.

How to change the order of images

To move a certain image to a different position in the order rotation, drag and drop the respective image in the small preview of the image slider at the top. Any additional text/link that you have set for the image will also be moved.

Keep a fixed aspect ratio on all devices

You can define a fixed aspect ratio for the image slider to keep image dimensions consistent across devices.

Activate the checkbox Keep aspect ratio on all devices and move the slider to select an aspect ratio for the images to be displayed in across desktop and mobile devices. Note that if you have added a large amount of text to an image, the aspect ratio may still be adjusted automatically to ensure that the text fits correctly.