How can we help you today?

How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element (Modern Experience)

This article will demonstrate how to auto-rotate the ShortPoint Tabs Design Element using the Code Design Element.

Here's a quick preview of how it will look on your page:


Sample rotating tabs


NOTE: This article is for Modern SharePoint pages. If your SharePoint page does not look like this, check out How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element (Classic Experience).



TABLE OF CONTENTS


Before we begin

  • This article is only for the Tabs Design Element on Modern SharePoint Pages
  • Make sure you are a ShortPoint Designer with an active license.
  • Make sure you have the latest version of ShortPoint installed for your SharePoint environment.
  • Make sure you already have an existing Tabs Design Element on your SharePoint page.

Step-by-step Tutorial


Follow the steps below to learn how to auto-rotate tabs:


NOTE: Make sure that you already have the Tabs Design Element on your SharePoint page before proceeding with the article. 


Step 1: Add Class to the Tabs Design Element


Hover over the Tabs Design Element and click the cogwheel icon.


cogwheel icon


Then, go to the Custom CSS tab.


Custom CSS tab


Scroll down to the Class field, and add my-rotating-tabs as the class name of your Tabs Design Element.


my rotating tabs class


Click Update to save the changes.


Update button



NOTE: Do not republish the page yet. You still need to add the Code Design Element to create auto-rotating tabs.

Step 2: Add Code Design Element to the page

NOTE: You can add the Code Design Element anywhere on the page. This won't affect the spacing and will not be visible in your design. 


Click the black plus icon to open Page Builder.


black plus icon



Click Code


Code design element


NOTE: Learn more about the Code Design Element by checking out Introducing ShortPoint Code Design Element.

Step 3: Copy the code

Copy the code below:



(function() {

'use strict';

var tabsClass = 'my-rotating-tabs';
var secondsToRotate = 4;

function initHook() {
if( window.shortPointInserter ) {
return;
}

setTimeout( rotateTabs, 500);
};

var currentIndex = 0;

function rotateTabs() {
var $ = shortpoint.$;
$( '.' + tabsClass ).each(function() {

var $tabTitles = $(this).find( '.shortpoint-tab-title' );
var totalTabs = $tabTitles.length;

setInterval(function() {
currentIndex = ( currentIndex + 1 ) % totalTabs;
var $a = $tabTitles.eq( currentIndex );
var $tab = $( $a.attr('href') );
$a.tab('show');
$tab.addClass('shortpoint-in').addClass('shortpoint-fade');
}, secondsToRotate * 1000)

})
}

initHook();

})();



Step 4: Paste the code into the Code Design Element


Go to the Design tab and paste the code into the JavaScript field.


JavaScript field


(Optional) Modify how long the tab rotates by changing the value in secondsToRotate.


secondstorotate



NOTE: The secondsToRotate variable sets how long the tabs rotate. By default, the value is set to 4 seconds. You may change this according to your preference. 


Scroll down to Sandbox mode. Make sure to disable it as this is enabled by default.


Sandbox mode



Step 5: Insert and Save


Click Insert.


Insert button


Click Save.


Save button


Then, click Republish.


Republish button


NOTE: If you do not see the Tabs automatically rotating, use Ctrl+Shift+R / Cmd+Shift+R / CMD+F5, depending on the operating system you are using.

That's it! You should now see your Tabs Design Element automatically rotating on your SharePoint page. 



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