How to Create a Text Carousel using the Image Carousel Design Element

NOTEShortPoint already has a Textshow Design Element that you can use as a text carousel. Check out How to Customize the Textshow Design Element to learn how to add it to your page. But if you still want to use the Image Carousel as a text carousel, the steps below are still up to date.

By default, the Image Carousel Design Element has images:

You can hide these images to create a text carousel using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint tag
  • Step 2: Copy the Custom CSS
  • Step 3: Edit the Image Carousel
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Image Carousel Design Element on your page.

Interactive Tutorial

Before starting the interactive tutorial, copy the Custom CSS code below:

.shortpoint-image-carousel-bg {
display: none;
}

Step-by-step Tutorial

Follow the detailed guide below to learn how to turn the Image Carousel into a Text Carousel:

Step 1: Edit the ShortPoint tag

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

• Click the cross icon to close the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Copy the Custom CSS

• Copy the Custom CSS code below:

.shortpoint-image-carousel-bg {
display: none;
}

NOTEBefore proceeding make sure you already have the Image Carousel Design Element on your page. Check out How to Customize the Image Carousel Design Element to learn how to add it to your page.

• Click the Image Carousel tag:

Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code.

NOTEYou can follow the optional steps if you want to resize the Image Carousel after pasting the code.

• (Optional) Click the back icon:

• Navigate to the Design tab.
• Scroll down until you see Height and adjust the size according to your needs.

Step 5: Save

• Once done, click the green checkmark.
• Click the eye icon to see your page in real time:

• Click Save to apply all your changes:

That’s it! You have successfully transformed the Image Carousel into a Text Carousel.

Related articles:

• How to Change the Background Color of the Countdown Design Element
• How to Create a Border for Tiles Design Element
• How to Make the Tiles Design Element Display Regular Font Instead of Bold