How can we help you today?

How to Customize the Slideshow Design Element

This article will walk you through customizing the Slideshow Design Element and its basic features.


Slideshow


TABLE OF CONTENTS


Prerequisite

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Slideshow Design Element:



NOTECheck out Slideshow Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Slideshow Design Element:

Step 1: Insert the Slideshow Design Element

  • Click the plus icon.
  • Use the search box to look for Slideshow and click it.

Step 2: Edit the Slideshows’ content

  • In the Items tab, click the cogwheel icon.


cogwheel icon

  • Add a Title.
  • Click the folder icon to add an image or paste the image URL in the field provided.


folder icon

  • Add a Description.
  • (Optional) Add a Link and a Link Text.
  • Click the back icon to edit the other items in the Slideshow.


back icon

  • Repeat the steps above.
  • (Optional) If you want to add other items, click Add New. Then, repeat the same steps above to edit the content of the new item.


Add New

NOTEYou can also create dynamic Slideshow content. Check out ShortPoint Connect: Basic Tutorial to learn how.

Step 3: Customize the Slideshow’s design

  • Navigate to the Design tab.
  • Customize the look of the Slideshow according to your preference.


NOTECheck out Slideshow Features to learn more about the features you can customize.

Step 4: Insert and Save

  • Once satisfied, click the green checkmark.
  • Then, click the eye icon to see your page in real-time.

eye icon

  • Click Save to apply all your changes.


Save


Slideshow Features

Below are the tabs you can find in the Slideshow Settings window:


A. Items tab

The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:


Items tab


ITEMS ACTION ICONS


cogwheel iconCogwheel

opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.

Duplicate iconDuplicate

duplicates the item selected.

Trash iconTrash

deletes the item selected.

Add New

Add New

adds a new item.

Drag and drop

Drag and Drop

allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS

TitleTitle

add item title.

ImageImage
allows you to add an image.
DescriptionDescription
allows you to add a description.
LinkLink
add a link to redirect users who click on an item.
Link TextLink Text

allows you to modify the text to be displayed on the link button.


B. Design tab

The Design tab allows you to customize the design of the Slideshow Design Element. It has the following options:


Design tab


SETTINGS

StyleStyleallows you to customize the style of the Slideshow Design Element.


SLIDER SETTINGS


Loop Speed
Loop Speed
allows you to modify the looping speed of the Slideshow. You can choose from Slow, Medium, or Fast.
AutoplayAutoplay
enables you to set the Slideshow to automatically play as soon as it loads.
TransitionTransitionallows you to choose the transition animation. You can choose from Slide or Fade.


TEXT

Text StyleText Style
allows you to change the style of the text. You can choose from Outline or Shadow.
Text SizeText Sizeallows you to modify the size of the text in number or percentage.
Text ColorText Colorallows you to change the color of the text. 

Horizontal alignment
Horizontal Alignmentallows you to change the alignment of the text. You can choose from Left, Right, or Center.


BACKGROUND COLOR

ColorColor 
modifies the color overlay of your Slideshow.
Color TransparencyColor Transparency
allows you to change the transparency of the color overlay.


SIZE

HeightHeightmodifies the height of the Slideshow.
WidthWidthmodifies the width of the Slideshow. By default, the width will fit the container automatically.

Force full screen width
Force full screen widthforces the Slideshow Design Element to fit the whole browser width. This will disable horizontal scrolling.

Force full page width
Force full page widthforces the width of the Slideshow Design Element to fit the page width. Enabling this option will not disable horizontal scrolling and will respect the page minimum width.


PERFORMANCE


Lazy Load Images
Lazy Load Images
when enabled, only necessary images will be loaded at page load. The rest of the images will be loaded once the user navigates to them.


IMAGE SETTINGS

Image PlacementImage Placement allows you to modify the placement of the image. You can choose from the following options:
  • Cover the area: will resize the image to fill the whole container from all edges, while maintaining the image aspect ratio (useful if you want to apply a background to the whole container, and you are fine with having parts of the image being cropped)
  • Show entire image: will resize the image to make the whole image fill the container while maintaining the image aspect ratio (useful if you want the whole image to be shown without any cropping)
  • Actual size: will show the exact image size without any resizing, while maintaining the image aspect ratio (useful if you want to show the exact dimensions of the image)
Enable Advanced image settingsEnable advanced image settingswhen enabled, additional image options will appear.

Image Horizontal Position
Image Horizontal Positionallows you to modify the horizontal position of the image. You can choose from right, left, or center.
Image Vertical PositionImage Vertical Positionallows you to modify the vertical position of the image. You can choose from top, bottom, or center.
Image RepeatImage Repeatallows you to repeat the image. You can choose from Repeat, Don’t Repeat, Repeat Vertically, and Repeat Horizontally.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Slideshow Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


NOTEThe Visibility and Connect tabs are currently unavailable in Live Mode.


That’s it! You now know how to customize the Slideshow Design Element. Enjoy using this Design Element on your SharePoint pages.


Related articles:
















Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more