Webflow

Limiter le nombre d'items en fonction du breakpoint

Javascript

HTML

CSS

Auteur

Aurélien Gallier

Démo lecture seule

Voir

Remix Link

Voir

Démo live

Voir

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

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


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

Tuto vidéo

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

Pour gérer le nombre d'items sur chaque breakpoint, il te suffit d'ajouter "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.

Plusieurs listes sur la même page ? Pas de soucis !

Il te suffit d'ajouter les mêmes attributs à cette nouvelle liste et de mettre les valeurs de ton choix. Chaque liste est indépendante l'une de l'autre.