SCRIPTWEBFLOWJAVASCRIPT

Limiter les items par breakpoint

Trois items sur mobile, six sur desktop : le nombre d'éléments de ta liste de collection suit l'écran, réglé par trois attributs.

Voir la démo en directOuvrir l'aperçu Webflow

/ ÉTAPE 01

Copie-colle ce script dans le <body> de ta page

Le JavaScript ci-dessous limite le nombre d'items affichés dans une liste de collection grâce aux attributs personnalisés.

limiter-items.html
<script>
  (function(){
  // -- NE PAS TOUCHER -- le script lit les data-attributes que vous avez définis dans l'UI
  var lists = document.querySelectorAll('[data-max-mobile]');

  function getMax(list) {
    var w = window.innerWidth;
    if (w >= 992) return parseInt(list.getAttribute('data-max-desktop'), 10);
    if (w >= 768) return parseInt(list.getAttribute('data-max-tablet'), 10);
    return parseInt(list.getAttribute('data-max-mobile'), 10);
  }

  function updateItems(){
    lists.forEach(function(list){
      var max = getMax(list);
      var items = list.querySelectorAll('.w-dyn-item');
      items.forEach(function(item, i){
        item.style.display = (i < max) ? '' : 'none';
      });
    });
  }

  window.addEventListener('resize', updateItems);
  document.addEventListener('DOMContentLoaded', updateItems);
  })();
</script>

/ ÉTAPE 02

Ajoute les attributs personnalisés sur ton "list-wrapper"

Pour gérer le nombre d'items sur chaque breakpoint, ajoute "data-max-desktop", "data-max-tablet" et "data-max-mobile" avec une valeur définie sur l'élément "list-wrapper" de ta liste de collection.

/ OÙ LE COLLER

DansWebflow, Paramètres › Custom code

CUSTOM CODE

PARAMÈTRES DU PROJET

Head code

<!-- vide -->

Footer code

<script> … </script>

Les codes personnalisés ne s'appliquent qu'après publication.

Footer code, jamais Head

Le script doit s'exécuter après le contenu de la page. Dans le Head, il ne trouverait rien à animer.

Une seule fois pour tout le site

Il se pose au niveau du projet, pas page par page. Les blocs le trouvent tout seuls.

Publier pour activer

Tant que le site n'est pas publié, le code personnalisé ne tourne pas, même en aperçu.

/ LES OPTIONS

Tout se pilote par classe et par attribut.

data-max-desktop

nombre

Items affichés à partir de 992 px.

data-max-tablet

nombre

Items affichés entre 768 et 991 px.

data-max-mobile

nombre

Items affichés en dessous de 768 px.

/ À RETENIR

Plusieurs listes sur la même page ? Ajoute les mêmes attributs à la nouvelle liste avec les valeurs de ton choix : chaque liste est indépendante de l'autre.

/ DANS LA MÊME FAMILLE

Les autres blocs
de contenu.

HTML · CSSTableau comparatif dans un rich textUn tableau comparatif dynamique injecté dans le corps de tes articles.JAVASCRIPTSlider avant / aprèsUn slider interactif avec effet avant / après, à poser sur n'importe quelle image.JAVASCRIPTTransition de page slide upUne animation de transition entre tes pages, pour une navigation plus fluide.

/ PLUS DE SCRIPTS

Continue à équiper
tes projets.

SCRIPTJAVASCRIPTExit popupAffiche une popup au moment précis où le visiteur s'apprête à quitter la page.GRATUIT · 5,2 KO · 2 ÉTAPESSCRIPTJAVASCRIPTCompte à rebours personnaliséUn compte à rebours sur mesure pour afficher une date limite.GRATUIT · 1,0 KO · 2 ÉTAPESSCRIPTJAVASCRIPTCompte à rebours classiqueLa version standard, posée en quelques minutes sur ta page.GRATUIT · 2,0 KO · 2 ÉTAPES