How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element

If you are using ShortPoint Tabs Design Element, and you want to it to automatically rotate every few seconds, then this article will tell you how to achieve that.

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

TABLE OF CONTENTS

• Before we begin
• Prerequisite
• 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
• Result

Before we begin

• This article is only for the Tabs Design Element on a Classic or Modern SharePoint page.
• Make sure you are a ShortPoint user with an active license.
• Make sure to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Prerequisite

 Please make sure that you already have the Tabs Design Element added on your SharePoint page.

Step 1: Add Class to the Tabs Design Element

As a prerequisite for this article, we assume that the Tabs Design Element is already added on your page. Click the cog wheel icon to proceed to the settings option:

Then, go to the Custom CSS tab:

On the Custom CSS tab, scroll down to Class, and add my-rotating-tabs as the class name of your Tabs Design Element:

Hit the Update button to save the changes:

NOTE: Please do not republish the page yet as we are still going to add a Design Element that will contain the code that will make the tabs rotate automatically.

Step 2: Add Code Design Element to the page

The most important part of this procedure is adding the Code Design Element to the page. 

NOTE: You can add this Design Element anywhere on the page, as this won't affect the spacing and won't be visible in your design. This will only be used for the purpose of adding a code for the Tabs Design Element to rotate automatically. 

For modern sites, click the plus sign (1) and select ShortPoint (2) from the list of web parts: 

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

Then select the Code Design Element from your ShortPoint Page Builder menu: 

For classic sites, click the blue Insert button from the Insert tab in the ribbon.

Then select the Code Design Element from  your ShortPoint Page Builder menu: 

NOTE: If you want to know more about what the Code Design Element can do, you may visit Introducing ShortPoint Code Design Element.

Step 3: Copy the code

Please copy the code that we are going to use for the purpose of this article: 

(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();

})();

NOTE: If you would like to control how many seconds you like the Tabs Design Element to rotate, you can modify the value of the variable in the JavaScript code called secondsToRotate, as its value represents the duration of the tab rotation (e.g. 3 means 3 seconds).

Step 4: Paste the code into the Code Design Element

Once the code is copied, you may now go to the Settings tab of your Code Design Element:

Paste and insert the code into the JavaScript field:

Then, click the Insert/Update button and republish the page to save your changes.

NOTE: It is a best practice to refresh the page after adding changes to it. If you do not see the tabs automatically rotating, please do a hard refresh (You may use Ctrl+Shift+R/Cmd+Shift+R, Ctrl+F5/CMD+F5, depending on the operating system you are using).

Result

That's it! You should now see your Tabs Design Element automatically rotating on your SharePoint page. I hope you enjoyed following this article! 

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