How can we help you today?

How To Apply Continuous Loop for ShortPoint Slideshows Design Element Using Custom CSS

By default, ShortPoint Slideshows Design Element has a built-in functionality to stop the looping feature when a mouse is hovered on to its images. But with the help of this article and by applying some simple Custom CSS, you will be able to remove that functionality so that the images will still continue to loop even when the moused is hovered on.


Before:

Slideshow before



After: 

Slideshow after


If you would like to apply this solution, please follow the steps in this support article.


TABLE OF CONTENTS


Before we begin


ShortPoint CSS customizations are available since the ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.


Step 1. Open the settings of the Slideshows Design Element


Edit the page. Open the settings of the Slideshows Design Element:


  • In Live Mode:

Locate the Design Element you would like to add the custom CSS and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

Live Mode

The Design tab will open.


  • In Grid Mode:

Click the cog wheel icon to open the settings of the Slideshows Design Element:


Grid Mode


  • In Legacy Page Builder:


Legacy Page Builder


The Settings tab will open.


Note: To know more about ShortPoint Live Mode and Grid Mode, please visit Introducing ShortPoint Page Builder Live Mode. 

Step 2. Copy the custom CSS code


Here is the custom CSS code you will need to use to have a continuous loop in the Slideshows Design Element:


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


Please copy the code to the clipboard.


Step 3. Update the Slideshows Design Element with the code


3.1. Switch to the Custom CSS tab


  • In Live Mode:

Live Mode Custom CSS


  • In Grid Mode and Legacy Page Builder:

Custom CSS Tab


3.2. Paste the copied code


Paste the code from the Step 2 to the Custom CSS field


  • In Live Mode:

Pasting Code in Live Mode


You will see the changes applied to your Design Element in real time.


  • In Grid Mode and Legacy Page Builder:

Grid Mode Custom CSS

You may check how it will look like on your page by clicking the Preview button:  

Grid Mode Preview


3.3. Confirm your changes


  • In Live Mode:

Click the checkmark button:


Live Mode Update

  • In Grid Mode and Legacy Page Builder:


Click Update


Grid Mode Update


Finally, save and/or republish the page.


Result


That's it. This is how it may look like on your page:


Final Result with Custom CSS


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