FAQ en carrousel à faire glisser

{%- comment -%} NAHNAH AI · FAQ en carrousel à faire glisser {%- endcomment -%}
<section class="nn-faq-carrousel-swipe" aria-roledescription="carrousel" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-carte: {{ section.settings.couleur_carte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-texte: {{ section.settings.couleur_texte }};">
  <div class="nn-faq-carrousel-swipe__entete">
    {%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
    <div class="nn-faq-carrousel-swipe__fleches">
      <button type="button" data-nn-dir="-1" aria-label="{{ section.settings.label_precedent | escape }}">←</button>
      <button type="button" data-nn-dir="1" aria-label="{{ section.settings.label_suivant | escape }}">→</button>
    </div>
  </div>
  <div class="nn-faq-carrousel-swipe__piste" tabindex="0">
    {%- for bloc in section.blocks -%}
      <article class="nn-faq-carrousel-swipe__carte" aria-roledescription="diapositive" aria-label="{{ forloop.index }} / {{ forloop.length }}" {{ bloc.shopify_attributes }}>
        <span class="nn-faq-carrousel-swipe__num">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span>
        <h3>{{ bloc.settings.question | escape }}</h3>
        <div class="nn-faq-carrousel-swipe__reponse">{{ bloc.settings.reponse }}</div>
      </article>
    {%- endfor -%}
  </div>
  <div class="nn-faq-carrousel-swipe__points" aria-hidden="true">
    {%- for bloc in section.blocks -%}<span></span>{%- endfor -%}
  </div>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for bloc in section.blocks -%}{"@type":"Question","name":{{ bloc.settings.question | json }},"acceptedAnswer":{"@type":"Answer","text":{{ bloc.settings.reponse | strip_html | json }}}}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}]}</script>
</section>
{% schema %}
{"name":"FAQ carrousel","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Tes questions, une par une"},
{"type":"text","id":"label_precedent","label":"Libellé flèche précédente","default":"Question précédente"},
{"type":"text","id":"label_suivant","label":"Libellé flèche suivante","default":"Question suivante"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#0F172A"},
{"type":"color","id":"couleur_carte","label":"Cartes","default":"#1E293B"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#F59E0B"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#F8FAFC"}],
"blocks":[{"type":"question","name":"Question","settings":[{"type":"text","id":"question","label":"Question","default":"D'où sont expédiés vos produits ?"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Indique ici l'origine de tes expéditions.</p>"}]}],
"presets":[{"name":"FAQ en carrousel à faire glisser","blocks":[{"type":"question"},{"type":"question","settings":{"question":"Comment utiliser un code promo ?"}},{"type":"question","settings":{"question":"Puis-je offrir un article ?"}},{"type":"question","settings":{"question":"Mes données sont-elles protégées ?"}}]}]}
{% endschema %}

{% stylesheet %}
/* Carrousel horizontal natif avec scroll-snap */
.nn-faq-carrousel-swipe{background:var(--nn-fond);color:var(--nn-texte);padding:56px 0;font-family:system-ui,sans-serif;overflow:hidden}
.nn-faq-carrousel-swipe__entete{display:flex;justify-content:space-between;align-items:end;gap:16px;max-width:1100px;margin:0 auto 24px;padding:0 16px}
.nn-faq-carrousel-swipe h2{margin:0;font-size:clamp(26px,4vw,40px)}
.nn-faq-carrousel-swipe__fleches{display:flex;gap:8px}
.nn-faq-carrousel-swipe__fleches button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;font-size:18px;cursor:pointer}
.nn-faq-carrousel-swipe__fleches button:hover{background:var(--nn-accent);border-color:var(--nn-accent);color:#000}
.nn-faq-carrousel-swipe button:focus-visible,.nn-faq-carrousel-swipe__piste:focus-visible{outline:2px solid var(--nn-accent);outline-offset:3px}
.nn-faq-carrousel-swipe__piste{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px max(16px,calc((100% - 1100px)/2 + 16px)) 16px;scrollbar-width:none}
.nn-faq-carrousel-swipe__piste::-webkit-scrollbar{display:none}
.nn-faq-carrousel-swipe__carte{flex:0 0 min(82%,360px);scroll-snap-align:start;background:var(--nn-carte);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:260px}
.nn-faq-carrousel-swipe__num{font-size:40px;font-weight:800;color:var(--nn-accent);line-height:1}
.nn-faq-carrousel-swipe__carte h3{margin:0;font-size:20px;line-height:1.3}
.nn-faq-carrousel-swipe__reponse{line-height:1.6;opacity:.8}
.nn-faq-carrousel-swipe__points{display:flex;justify-content:center;gap:8px;margin-top:8px}
.nn-faq-carrousel-swipe__points span{width:8px;height:8px;border-radius:8px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.nn-faq-carrousel-swipe__points span.est-actif{width:24px;background:var(--nn-accent)}
@media (prefers-reduced-motion: reduce){.nn-faq-carrousel-swipe__piste{scroll-behavior:auto}.nn-faq-carrousel-swipe__points span{transition:none}}
{% endstylesheet %}

{% javascript %}
/* Flèches, clavier et points actifs du carrousel */
(function () {
  document.querySelectorAll('.nn-faq-carrousel-swipe').forEach(function (section) {
    var piste = section.querySelector('.nn-faq-carrousel-swipe__piste');
    var cartes = piste.querySelectorAll('.nn-faq-carrousel-swipe__carte');
    var points = section.querySelectorAll('.nn-faq-carrousel-swipe__points span');
    if (!cartes.length) return;
    // Fait défiler d'une carte dans la direction voulue
    function defiler(dir) {
      piste.scrollBy({ left: dir * (cartes[0].offsetWidth + 16) });
    }
    section.querySelectorAll('[data-nn-dir]').forEach(function (b) {
      b.addEventListener('click', function () { defiler(Number(b.dataset.nnDir)); });
    });
    piste.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowRight') { e.preventDefault(); defiler(1); }
      if (e.key === 'ArrowLeft') { e.preventDefault(); defiler(-1); }
    });
    // Met en avant le point de la carte la plus visible
    function majPoints() {
      var index = Math.round(piste.scrollLeft / (cartes[0].offsetWidth + 16));
      points.forEach(function (p, i) { p.classList.toggle('est-actif', i === Math.min(index, points.length - 1)); });
    }
    piste.addEventListener('scroll', function () { window.requestAnimationFrame(majPoints); }, { passive: true });
    majPoints();
  });
})();
{% endjavascript %}