How can we help you today?

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.

stop looping

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.

continuous looping



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;

Step 3: Paste the Custom CSS

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

  • Click the Slideshow tag.
  • Select the cogwheel icon.
  • Navigate to the Custom CSS tab.
  • Paste the copied code in the field provided.
  • Click the green checkmark.

Step 4: Save

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

eye icon

  • Click Save to apply your changes.


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

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 20 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