Lecture automatique des tabs

Avoir des tabs qui changent automatiquement sans action manuelle

Language: Javascript

Catégorie : Utilities

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
  let tabTimeout;
  clearTimeout(tabTimeout);

  let autoTime = document.querySelector('[js-tabs-auto-time]')
    ? parseInt(document.querySelector('[js-tabs-auto-time]').getAttribute('js-tabs-auto-time'))
    : 5000;

  tabLoop();

  function isNavbarOpen() {
    const navbarButton = document.querySelector('[js-tabs-navbar-button]');
    return navbarButton && navbarButton.classList.contains('w--open');
  }

  function tabLoop() {
    tabTimeout = setTimeout(function () {
      let currentLinks = document.querySelectorAll('[js-tabs-link].w--current');
      let nextLink = currentLinks.length > 0 ? currentLinks[0].nextElementSibling : null;

      if (nextLink) {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          nextLink.removeAttribute('href');
          nextLink.click();
        }
      } else {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          let firstLink = document.querySelector('[js-tabs-link]:first-child');
          firstLink.removeAttribute('href');
          firstLink.click();
        }
      }
    }, autoTime);
  }

  let tabLinks = document.querySelectorAll('[js-tabs-link]');
  tabLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      clearTimeout(tabTimeout);
      tabLoop();
    });
  });
});

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Auto Tabs -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/tabs/auto-tabs.js"></script>

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
  let tabTimeout;
  clearTimeout(tabTimeout);

  let autoTime = document.querySelector('[js-tabs-auto-time]')
    ? parseInt(document.querySelector('[js-tabs-auto-time]').getAttribute('js-tabs-auto-time'))
    : 5000;

  tabLoop();

  function isNavbarOpen() {
    const navbarButton = document.querySelector('[js-tabs-navbar-button]');
    return navbarButton && navbarButton.classList.contains('w--open');
  }

  function tabLoop() {
    tabTimeout = setTimeout(function () {
      let currentLinks = document.querySelectorAll('[js-tabs-link].w--current');
      let nextLink = currentLinks.length > 0 ? currentLinks[0].nextElementSibling : null;

      if (nextLink) {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          nextLink.removeAttribute('href');
          nextLink.click();
        }
      } else {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          let firstLink = document.querySelector('[js-tabs-link]:first-child');
          firstLink.removeAttribute('href');
          firstLink.click();
        }
      }
    }, autoTime);
  }

  let tabLinks = document.querySelectorAll('[js-tabs-link]');
  tabLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      clearTimeout(tabTimeout);
      tabLoop();
    });
  });
});

</script>

Les attributes

Tab Link - Identifier tous les éléments Tab Link

Nom

js-tabs-link

Valeur

Ajouter l'attribute à chaque Tab Link

Aucune valeur nécessaire

Tabs Menu - Identifier le Tabs Menu (parent des Tabs Links) OPTIONNEL

Nom

js-tabs-auto-time

Valeur

[duration]

Ajouter l'attribute à l'élément Tabs Menu et changer la duration en fonction de la durée souhaitée (5000ms si pas indiqué)

Navbar - Identifier le menu button de votre Navbar OPTIONNEL

Nom

js-tabs-navbar-button

Valeur

Ajouter cet attribute au Menu Button de votre Navbar. Cela empêchera d'avoir des bugs / sauts lors de l'ouverture de votre navbar sur mobile

Aucune valeur nécessaire

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du script

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
  let tabTimeout;
  clearTimeout(tabTimeout);

  let autoTime = document.querySelector('[js-tabs-auto-time]')
    ? parseInt(document.querySelector('[js-tabs-auto-time]').getAttribute('js-tabs-auto-time'))
    : 5000;

  tabLoop();

  function isNavbarOpen() {
    const navbarButton = document.querySelector('[js-tabs-navbar-button]');
    return navbarButton && navbarButton.classList.contains('w--open');
  }

  function tabLoop() {
    tabTimeout = setTimeout(function () {
      let currentLinks = document.querySelectorAll('[js-tabs-link].w--current');
      let nextLink = currentLinks.length > 0 ? currentLinks[0].nextElementSibling : null;

      if (nextLink) {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          nextLink.removeAttribute('href');
          nextLink.click();
        }
      } else {
        if (isNavbarOpen()) {
          tabLoop();
        } else {
          let firstLink = document.querySelector('[js-tabs-link]:first-child');
          firstLink.removeAttribute('href');
          firstLink.click();
        }
      }
    }, autoTime);
  }

  let tabLinks = document.querySelectorAll('[js-tabs-link]');
  tabLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      clearTimeout(tabTimeout);
      tabLoop();
    });
  });
});

</script>