Tous nos scripts

Utilities

Lecture automatique des tabs

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

Etape 1 - 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>
Copier

Etape 2 - Ajouter les attributes correspondants

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

Copié !

Valeur

[duration]

Copié !

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 & scripts

Tuto

Template

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

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.