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:

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
• Step-by-step Tutorial
  • Step 1: Add Class to the Tabs Design Element
  • Step 2: Add Code Design Element to the page
  • Step 3: Copy the code
  • Step 4: Paste the code into the Code Design Element
  • Step 5: Insert and Save

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.

Then, go to the Custom CSS tab.

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

Click Update to save the changes.

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.

Click Code. 

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.

(Optional) Modify how long the tab rotates by changing the value in 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.

Step 5: Insert and Save

Click Insert.

Click Save.

Then, click Republish.

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:

• How to Set a Separate Color for Each Tab of ShortPoint Tabs Design Element
• How to Add a Gradient Underline below ShortPoint Tabs
• How to Modify the Width for ShortPoint Tabs
• How to Automatically Open a Lightbox/Popup When the Page Loads