How To Apply Continuous Loop for the Slideshow Design Element Using Custom CSS

The Slideshow Design Element has a built-in functionality that stops the looping feature whenever a user hovers over it.

This article will demonstrate how to deactivate this feature using Custom CSS. Through this, the Slideshow will continue to loop even when the mouse hovers over it.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial 
  • Step 1: Edit the ShortPoint web part
  • Step 2. Copy the custom CSS code
  • Step 3: Paste the Custom CSS
  • Step 4: 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 Slideshow Design Element on your page.

Interactive Tutorial

Before starting the tutorial, copy the Custom CSS below:

.slick-list {
    pointer-events: none;
}

Step-by-step Tutorial 

Follow along to learn how to apply continuous loop for Slideshows:

Step 1: Edit the ShortPoint web part

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

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

Step 2. Copy the custom CSS code

Copy the Custom CSS below:

.slick-list {
    pointer-events: none;
}

NOTEBefore proceeding, ensure a Slideshow Design Element is on your page.

Step 4: Save

• Click the eye icon to see your page in real-time.

• Click Save to apply your changes.

Congratulations! Your Slideshow now loops continuously even when a mouse hovers over it.

Related articles:

• How to Make Rounded Corners for the ShortPoint Slideshows Design Element
• Custom CSS Tab for ShortPoint Design Elements
• How to Add Play/Pause Functionality to the Slideshows Design Element
• ShortPoint Page Builder Live Mode Feature: Preview Web Part