🎠 CarrouselsGratuit · 0 NahnahPar NAHNAH

Bandeau de logos en défilement infini

Bandeau de logos (partenaires, médias, moyens de paiement compatibles) qui défile en boucle avec des bords fondus ; les logos passent en couleur au survol et le bandeau s’arrête.

Voir le code Modifier avec l’IA · 1 Nahnah

Aperçu en direct

Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.

Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).

Code à copier

Fichier complet sections/nahnah-carrousels-logos-infini.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Bandeau de logos en défilement infini {%- endcomment -%}
<div class="nn-carrousels-logos-infini" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-vitesse: {{ section.settings.vitesse }}s; --nn-hauteur: {{ section.settings.hauteur_logo }}px;">
  {%- if section.settings.titre != blank -%}<p class="nn-carrousels-logos-infini__titre">{{ section.settings.titre | escape }}</p>{%- endif -%}
  <div class="nn-carrousels-logos-infini__fenetre">
    <div class="nn-carrousels-logos-infini__rail">
      {%- for tour in (1..2) -%}
        <ul class="nn-carrousels-logos-infini__liste" role="list"{% if tour == 2 %} aria-hidden="true"{% endif %}>
          {%- for block in section.blocks -%}
            <li class="nn-carrousels-logos-infini__logo"{% if tour == 1 %} {{ block.shopify_attributes }}{% endif %}>
              {%- if block.settings.lien != blank -%}<a href="{{ block.settings.lien }}"{% if tour == 2 %} tabindex="-1"{% endif %}>{%- endif -%}
              {%- if block.settings.image != blank -%}{{ block.settings.image | image_url: height: 120 | image_tag: loading: 'lazy', alt: block.settings.nom }}{%- else -%}<span class="nn-carrousels-logos-infini__nom">{{ block.settings.nom | escape }}</span>{%- endif -%}
              {%- if block.settings.lien != blank -%}</a>{%- endif -%}
            </li>
          {%- endfor -%}
        </ul>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Bandeau de logos infini",
  "tag": "section",
  "class": "nn-section-carrousels-logos-infini",
  "max_blocks": 20,
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Ils parlent de nous" },
    { "type": "range", "id": "vitesse", "label": "Durée d’un tour", "min": 10, "max": 80, "step": 2, "unit": "s", "default": 30 },
    { "type": "range", "id": "hauteur_logo", "label": "Hauteur des logos", "min": 20, "max": 80, "step": 2, "unit": "px", "default": 36 },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#FFFFFF" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#1A1A1A" },
    { "type": "header", "content": "Espacement" },
    { "type": "range", "id": "marge_haut", "label": "Marge haute", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 32 },
    { "type": "range", "id": "marge_bas", "label": "Marge basse", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 32 }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Logo (officiel)" },
        { "type": "text", "id": "nom", "label": "Nom (affiché sans image)", "default": "Votre partenaire" },
        { "type": "url", "id": "lien", "label": "Lien (facultatif)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Bandeau de logos infini",
      "blocks": [
        { "type": "logo", "settings": { "nom": "Le Journal" } },
        { "type": "logo", "settings": { "nom": "Magazine Mode" } },
        { "type": "logo", "settings": { "nom": "Radio Ville" } },
        { "type": "logo", "settings": { "nom": "Blog Tendance" } },
        { "type": "logo", "settings": { "nom": "Podcast Business" } }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-carrousels-logos-infini { padding: var(--nn-mh) 0 var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-carrousels-logos-infini__titre { margin: 0 16px 18px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.nn-carrousels-logos-infini__fenetre { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nn-carrousels-logos-infini__rail { display: flex; width: max-content; animation: nn-carrousels-logos-infini-defile var(--nn-vitesse) linear infinite; }
.nn-carrousels-logos-infini__fenetre:hover .nn-carrousels-logos-infini__rail, .nn-carrousels-logos-infini__fenetre:focus-within .nn-carrousels-logos-infini__rail { animation-play-state: paused; }
.nn-carrousels-logos-infini__liste { display: flex; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.nn-carrousels-logos-infini__logo { flex: none; display: flex; align-items: center; height: var(--nn-hauteur); filter: grayscale(1); opacity: 0.55; transition: filter 0.3s, opacity 0.3s; }
.nn-carrousels-logos-infini__logo:hover, .nn-carrousels-logos-infini__logo:focus-within { filter: none; opacity: 1; }
.nn-carrousels-logos-infini__logo a { display: flex; align-items: center; height: 100%; color: inherit; text-decoration: none; }
.nn-carrousels-logos-infini__logo img { height: 100%; width: auto; display: block; }
.nn-carrousels-logos-infini__nom { font-size: calc(var(--nn-hauteur) * 0.6); font-weight: 800; white-space: nowrap; letter-spacing: -0.02em; }
@keyframes nn-carrousels-logos-infini-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nn-carrousels-logos-infini *, .nn-carrousels-logos-infini *::before, .nn-carrousels-logos-infini *::after { animation: none !important; transition: none !important; }
  .nn-carrousels-logos-infini__fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .nn-carrousels-logos-infini__liste[aria-hidden="true"] { display: none; }
}
{% endstylesheet %}

Télécharger le fichier .liquid

Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.

Prompt à copier

À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.

Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.

Élément : « Bandeau de logos en défilement infini » (Carrousels)
Description : Bandeau de logos (partenaires, médias, moyens de paiement compatibles) qui défile en boucle avec des bords fondus ; les logos passent en couleur au survol et le bandeau s’arrête.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/carrousels-logos-infini
Fichier : nahnah-carrousels-logos-infini.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-carrousels-logos-infini.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).

Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-carrousels-logos-infini ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.

Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : carrousels-logos-infini).

Installer dans ma boutique

En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).

Chargement de tes boutiques…

Installer dans Shopify

Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-carrousels-logos-infini ».
Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément carrousels-logos-infini de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.

Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).

Connecter le MCP