How can we help you today?

How to Customize the Image Carousel Design Element

This article will demonstrate how to customize the Image Carousel Design Element and discuss the OOTB options you can modify.


Image Carousel


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 Image Carousel Design Element:



NOTECheck out Image Carousel 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 Image Carousel Design Element:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit


  • Click the ShortPoint tag.
  • Select the pencil icon.

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

Step 3: Edit the content

  • Click the cogwheel icon of the first item to edit its content.


Cogwheel icon


  • Click the folder icon and select the image you want to display.


folder icon


  • Add a Title.
  • (Optional) Add a Tooltip text.
  • Add a Link.
  • Click the back icon.


back icon


  • Repeat the same steps for the other items. 
  • (Optional) If you want to add another item, click Add New and repeat the steps above to edit its content.


NOTEYou can also create dynamic content using the ShortPoint Connect feature. To learn more about it, check out ShortPoint Connect: Basic Tutorial. 

Step 4: Customize the Image Carousel’s design

  • Navigate to the Design tab.
  • Customize the look of the Image Carousel according to your preference.
  • Once satisfied, click the green check mark.


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

Step 5: Save

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


eye icon


  • Click Save to apply all your changes.


Save


Below are the options you can find in the Image Carousel 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 iconCogwheelopens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
Duplicate iconDuplicateduplicates the item selected.

Trash icon
Trashdeletes the item selected.
Add NewAdd New
adds a new item.
Drag and dropDrag and Drop
allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS (CONTENT TAB)


Image
Imageallows you to choose the image you want to showcase. You can add images using two options: (1) the folder icon, which will redirect you to your SharePoint contents library, or (2) the Image field, which allows you to paste the URL of the image you want to use.
TitleTitleallows you to add item title.

Description
Descriptionallows you to add a description.
TooltipTooltipallows you to add a description to the items whenever a user hovers over it.

Link
Link
allows you to add a link where users will be redirected when they click an item.

B. Design tab

The Design tab allows you to customize the look of the Image Carousel Design Element. It has the following options:


Design tab


SLIDER SETTINGS

Max Images to ShowMax images to show 
allows you to modify the maximum number of images to show per slide. By default, it is set to three images.

Autoplay
Autoplaywhen enabled, slides will automatically play.
Loop SpeedLoop speed
allows you to control the speed of the Autoplay.
InfiniteInfinitewhen enabled, infinite scrolling will be allowed.
ResponsiveResponsivewhen enabled, this option will automatically change the number of images shown in each slide based on the size of the screen.


STYLES

Hover StyleHover Style
allows you to customize how the Image Carousel will look whenever a user hovers over it.
Text SizeText Size
allows you to modify the text size of the Image Carousel.
Text ColorText Color
allows you to change the color of the text.
Horizontal alignmentHorizontal Alignment 
allows you to change the horizontal alignment of the Image Carousel. You can choose from Left, Center, or Right.

Show Border
Show Border
when enabled, this will add a border to the Image Carousel.
Border ColorBorder Color
this option will only appear when Border Color is enabled. This allows you to change the color of the border.


BACKGROUND COLOR

ColorColorallows you to modify the background color of the Image Carousel.

Color Transparency
Color Transparency
allows you to customize the color transparency of the background color.


SIZE


Height
Heightallows you to customize the height of the Image Carousel.

Width
Widthallows you to modify the width of the Image Carousel.


PERFORMANCE


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


IMAGE SETTINGS


Image Placement
Image Placement allows you to choose how the images will be shown. You have the following options:
  • Cover the area: will resize the image to fill the whole container from all edges, while maintaining the image aspect ratio.
  • Show entire image: will resize the image to make the whole image fill the container while maintaining the image aspect ratio.
  • Actual size: will show the exact image size without any resizing, while maintaining the image aspect ratio.

Enable Advanced image settings
Enable Advanced Image Settings
when enabled, advanced image settings will appear.
Image Horizontal PositionImage Horizontal Position
allows you to choose the horizontal position of the image. You can choose from Left, Center, or Right.
Image Vertical PositionImage Vertical Position

allows you to choose the vertical position of the image. You can choose from Top, Center, or Bottom.

Image RepeatImage Repeat
allows you to repeat the image. You can choose from Repeat, Don’t Repeat, Repeat Horizontally, or Repeat Vertically.

C. Custom CSS Tab

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


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


Custom CSS tab


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


That’s it! You can now effectively use the Image Carousel 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