> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/gallery.md).

# Gallerie

{% hint style="info" icon="figma" %}
Noms des composants : **fpGalleryDesktop**, **fpGalleryMobile**
{% endhint %}

***

## Desktop

{% tabs %}
{% tab title="1P" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6688-5127&page-id=6688:1409&scaling=scale-down-width&starting-point-node-id=6688:5127&t=JOkjdEI22jNl5em1-1&viewport=2457,-2586,0.5>" %}

Cette galerie est composé uniquement d'images en 4:5. Elle est utilisée uniquement pour les nouveaux produits 1P ou les best-sellers.
{% endtab %}

{% tab title="1P (4:3)" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6688-5210&page-id=6688:1409&scaling=scale-down-width&starting-point-node-id=6688:5210&t=oMBgo6j9iTgfg1eC-1&viewport=1224,-480,0.22>" %}

Cette galerie est composé uniquement d'images en 4:5. Elle est utilisée uniquement pour les produits 1P disposant que d'une seule ambiance au format 4:5.
{% endtab %}

{% tab title="3P" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6688-5068&page-id=6688:1409&scaling=scale-down-width&starting-point-node-id=6688:5068&t=oMBgo6j9iTgfg1eC-1&viewport=1224,-480,0.22>" %}

Cette galerie est composé uniquement d'images en 4:3. Elle est utilisée uniquement pour les produits 3P (la marketplace).
{% endtab %}
{% endtabs %}

***

### Principes

#### Exposition initiale

La disposition en grille met en avant les visuels clés. L'objectif est de donner une vue d'ensemble immédiate du produit sans interaction requise.

#### Hiérarchie par le volume

Le bouton "Voir plus d'images" sert de point de rupture visuel. Il permet de gérer des galeries sans rallonger indéfiniment la fiche produit, préservant ainsi l'accès aux autres informations.

***

## Mobile

{% tabs %}
{% tab title="4:5" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=7572-9883&page-id=6688:1409&scaling=min-zoom&starting-point-node-id=6688:5068&t=JOkjdEI22jNl5em1-1&viewport=2457,-2586,0.5>" %}
{% endtab %}

{% tab title="4:3" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=7572-9929&page-id=6688:1409&scaling=min-zoom&starting-point-node-id=6688:5068&t=JOkjdEI22jNl5em1-1&viewport=2457,-2586,0.5>" %}
{% endtab %}
{% endtabs %}

***

### Principes

#### Focus unitaire

Le slider doit isoler un seul visuel à la fois pour s'adapter à la taille réduite des écrans. Cela permet une concentration maximale sur les détails du produit.

#### Affordance de balayage

La présence d'indicateurs (dots) est indispensable pour signaler le caractère carrousel. Le mouvement doit être fluide pour répondre naturellement au geste de l'utilisateur.

***

## Composant lié

{% content-ref url="/pages/QhS5kK3rPE5esssXNVCH" %}
[Récapitulatif Produit](/documentation/components/aide-au-choix.md)
{% endcontent-ref %}

{% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %}
[Bouton](/documentation/components/button.md)
{% endcontent-ref %}