Creating an image slider

Example of an image slider:

Instructions for optimal image display

Creating an image slider

To create an image slider:

1. Navigate to the page where you want to add an image slider.

2. Click Edit. The Edit page will now open.

3. Click on Add block on the bottom of the page. In the dropdown, select the Image comparison slider block type.

4. Enter a Title for your image slider.

5. Enter a Caption. A caption is the descriptive text displayed under the image slider.

6. In the Display as field, select the aspect ratio you would like your images to be displayed as. Note:

   1. The display ratio selected will determine how both uploaded images will be displayed.

   2. Both the before and after image must have the same aspect ratio in order for the slider to function correctly.

7. Set the Starting Position of the slider.

8. Add the before and after images. The first image you will upload will appear on the left, the second will appear on the right.

9. For each image that you add, you will be presented with the following fields:

   1. Image (required)

   2. Alt text (required): Alternative text, the text that describes the appearance or function of an image on a page. This text is read aloud by screen readers used by visually impaired users, displays in place of an image if it fails to load and is indexed by search engine bots to better understand the context of your page.

   3. Label: The text that will appear above each image.

10. Once you have completed all fields, click Add block.

11. Click Publish to publish the image slider.