Image Slider
The ideal component to grab users' attention.
Last updated
Was this helpful?
The ideal component to grab users' attention.
Last updated
Was this helpful?
Our component is an effective way of communicating important information through visual elements.
The slider allows several images to be displayed in sequence, and has strengths such as being able to automatically rotate images and adjust the height of the web part according to the image and the space available.
It can be used to highlight corporate initiatives, or to bring together the company's values in one place, and you can insert both graphics and photos in it, therefore it is fully customizable!
If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Image to quickly find and select the Image Slider web part, which is named "IAI - ImageSlider".
The view settings allows you to customize the appearance of your application by adjusting various layout settings.
By opening this first configuration, you will see the following options:
Do you want to hide the background? You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
Do you want to hide the background shadow? You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
Select the type of background shadow If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
If you select High contrast, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
By choosing the Light background shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
Finally, the Dark background shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
Do you want to hide the title? Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
Enter the application title Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Image Slider” at the top left angle of the webpart.
In this configuration, you need to select both the document libraries containing the images and the display settings for the web part (e.g., the number of seconds between image changes and the height of the display).
As a first step, you need to enter the link to the site where the Image Slider document library is registered, usually coinciding with the intranet site.
Select the time in seconds in which the slider will change the image automatically: The configuration allows you to select the display time: by dragging the slider in the section called Select the time in seconds in which the slider will change the image automatically, you can set the time.
Enter the height of the slider: In the section called Enter the heigh of the slider, you can enter the height of the images in pixels. This can be useful when you want to select a portion of a large image or to determine the exact space the web part should occupy within a page.
Left arrow: by activating this field, the arrow for scrolling images to the left will be visible.
Right arrow: by activating this field, the arrow for scrolling images to the right will be visible.
Current image selection indicators: by activating this field, dots will be visible under the images indicating the number of images in the collection, and the darker dot will indicate the current image.
In order to create a new set of images for the Image Slider web part, a few steps are required, which are listed below:
Access the Site contents by clicking on the Settings icon, which is located on the top right of your Intranet’s homepage.
Access the document library named Slider Images. Here you need to upload the images you want to view.
Click on Upload and then on Files to upload all the images you want to view.
The Url column allows you to add a link to an image, so that the image will be clickable. To associate links to your images, you need to click on Edit in grid view: this will allow you to edit the items included in the document library. Then, copy-paste the URL you want to add to each picture into the corresponding box. Finally, click on Exit grid view to save your changes.
The Order column allows you to choose the order in which pictures will be displayed. To establish the order of images, you need to click on Edit in grid view: this will allow you to edit the items in the document library. Then, assign a number to each picture and click on Exit grid view to save your changes.
Here is an example of what the Image Slider web part looks like on the page:
Click the Edit properties button on the left of the web part to open the property pane and set options. See below for more information on these options.
In the second field, you need to select the document library called Slider Images, where the images are collected, from the drop-down menu. The explains you how to upload pictures to the document library.
