How can we help you today?

How to Customize the Loop Speed in Slideshows, Image Carousels or Tickers Design Elements

ShortPoint Slideshows, Image Carousels and Tickers Design Elements come with a pre-defined set of speeds (slow, medium or fast), but in case you want to have the loop speed set to another specific period (10 minutes, or 1 hour for example), this article will show you how to do it.


TABLE OF CONTENTS


This solution is for you if:

  • You have ShortPoint installed on your SharePoint site(s).
  • You are a ShortPoint user with an active license.


Note: This solution can be used for both Classic and Modern SharePoint experience.

Step 1. Add a ShortPoint Design Element to Your Page


You can easily add a ShortPoint Design Element to your pages using ShortPoint Page Builder. For the purpose of this article, we will use the Slideshows Design Element, however, you may also use Image Carousels or Tickers Design Element to your page as they also contain Loop Speed/Speed settings. 


  • Modern Page

You can start with adding a ShortPoint web part to your page by clicking the plus button and selecting ShortPoint from the list of the web parts:


Insert ShortPoint in a Modern SharePoint Page


Then, click the blue Insert button to open the ShortPoint Page Builder:


Open ShortPoint Page Builder


Note: If adding the ShortPoint web part for the first time, the Info Design Element will be added automatically. Click the cross icon to remove it. Remove Info Design Element as it will be added by default the first time
Then, click the blue Insert button to open the Page Builder.

  • Classic Page


1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.


Insert ShortPoint on a Classic SharePoint page


Then, select Slideshows Design Element from the Page Builder grid.


Select ShortPoint Design Element from Page Builder


Step 2. Set the Loop Speed/Speed of Your Design Element


Before copying the Design Element from your page, it is important that you set their Loop Speed/Speed as it will be the property that we need to update later on as we go along this article.


2.1. Open the Design Element's settings


Edit the page.


Click the cog wheel icon of your Design Element to enter its settings:


Click the cog wheel icon to enter Slideshow settings


2.2. Set the Loop Speed/Speed


In the Settings tab, you will find the Loop Speed/Speed option by clicking the dropdown menu. Select any speed from the dropdown list. 


  • For Slideshows and Image Carousels Design Element:


Set the Loop Speed for Slideshow and Image Carousel Design Element


  • For Tickers Design Element:


Set the Speed for the Tickets Design Element


2.3. Save your Changes


Save your changes by clicking the Update button.


Click the Update button to save the changes


Step 3. Copy the Design Element from your SharePoint Page


To copy your Design Element, click the ellipsis (...) button and select Copy.


Click the ellipsis button and select copy to copy the Design Element from your page


Step 4. Paste the copied Design Element into a Text Editor


Open any text editor (for example, Notepad), and then paste the copied Design Element to see the code.


Paste the copied Design Element to a Text Editor


Step 5. Change the Loop Speed Animation


To change the loop speed option, look in the code for the attribute loop-speed.


Search for Loop Speed value in the pasted code


Note: If you are using SlideShows or Image Carousels Design Element, look for Loop Speed. If your Design Element is Tickers, look for Speed.


Select the value that comes between double quotation (" ") after the Loop-speed/Speed word, and change it with the amount you would like in milliseconds.


If you would like the SlideShows/Image Carousels/Tickers Design Element to rotate every 1 minute, then you need to put (1 minute * 60 seconds * 1000 milliseconds = 60000).

If you would like it to rotate every 1 hour, then you need to put (1 hour * 60 minutes * 60 seconds * 1000 milliseconds = 3600000).


In this example, we are going to change the Loop Speed value to 30000 to rotate every 30 seconds.


Change the loop speed value to millisecond


Once you are done changing the Loop Speed value, copy the code again, so you can paste it back to your page.


Copy the updated code


Important: If you update any of the settings of your Slideshows, Image Carousels or Tickers Design Element from the Settings, Items, Connect, Visibility and Custom CSS tab, the Loop Speed/Speed value will reset, and you will have to repeat these steps again. It is because ShortPoint Loop Speed/Speed dropdown menu will not recognize the numeric value inside the loop speed option you set from its code.

However, editing other Design Elements you have on your page should not affect your Slideshows/Image Carousels/Tickers Design Element Loop Speed value.

Step 6. Paste the Code Back to your SharePoint Page


While in edit mode, you can paste the code in an empty ShortPoint Section or you can replace the Design Element that you need to update:


Paste the Design Element Code


If you are satisfied with the result, you may save and publish your page.


Result


After following this article, your Slideshows, Image Carousels or Tickers Design Element should now have the Loop Speed/Speed that you set. 


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