How to Customize the Slideshow Design Element

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

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Insert the Slideshow Design Element
  • Step 2: Edit the Slideshows’ content
  • Step 3: Customize the Slideshow’s design
  • Step 4: Insert and Save
• Slideshow Features
  • A. Items tab
  • B. Design tab
  • C. Custom CSS Tab

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.

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

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

• 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.

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.

• Click Save to apply all your changes.

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 ACTION ICONS

	Cogwheel	opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
	Duplicate	duplicates the item selected.
	Trash	deletes the item selected.
	Add New	adds a new item.
	Drag and Drop	allows you to re-arrange the position of the item.

COGWHEEL ICON SETTINGS

	Title	add item title.
	Image	allows you to add an image.
	Description	allows you to add a description.
	Link	add a link to redirect users who click on an item.
	Link 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:

SETTINGS

Style

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

SLIDER SETTINGS

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

TEXT

	Text Style	allows you to change the style of the text. You can choose from Outline or Shadow.
	Text Size	allows you to modify the size of the text in number or percentage.
	Text Color	allows you to change the color of the text.
	Horizontal Alignment	allows you to change the alignment of the text. You can choose from Left, Right, or Center.

BACKGROUND COLOR

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

SIZE

	Height	modifies the height of the Slideshow.
	Width	modifies the width of the Slideshow. By default, the width will fit the container automatically.
	Force full screen width	forces the Slideshow Design Element to fit the whole browser width. This will disable horizontal scrolling.
	Force full page width	forces 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

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 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 settings	when enabled, additional image options will appear.
	Image Horizontal Position	allows you to modify the horizontal position of the image. You can choose from right, left, or center.
	Image Vertical Position	allows you to modify the vertical position of the image. You can choose from top, bottom, or center.
	Image Repeat	allows 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.

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:

• How to Customize the Simple List Design Element in Live Mode
• How to Customize the Panel Design Element in Live Mode
• How to Customize the Image Caption Design Element in Live Mode