Section carousel multi-usage avec 3 variantes visuelles (Standard, Spotlight, Coverflow), 9 types de blocs et des effets 3D avances.
Carousel
La section Carousel est l'une des sections les plus polyvalentes de Scale Theme. Elle permet d'afficher du contenu defilant horizontalement avec 3 variantes visuelles radicalement différentes et 9 types de blocs que vous pouvez mixer librement. Du simple slider d'images au carousel 3D avec effet coverflow, cette section couvre tous les besoins.
Les 3 variantes
Scale Theme propose 4 presets bases sur 3 variantes de carousel. Chaque variante change fondamentalement l'apparence et le comportement du carousel.
Variante Standard
Le carousel classique ou plusieurs cartes sont visibles simultanément, alignees horizontalement avec un espacement uniforme.
Quand l'utiliser :
- Produits : Afficher une sélection de produits avec prix et bouton d'ajout au panier
- Features/avantages : Presenter les points forts de votre marque avec icônes
- Équipe : Montrer les membres de l'équipe
- Collections : Slider de collections avec images
Points forts :
- Le plus polyvalent et le plus lisible
- Idéal pour du contenu informatif
- Fonctionne bien avec 2 a 7 cartes par vue
Variante Spotlight
La variante Spotlight met en avant la carte centrale qui est agrandie et plus opaque, tandis que les cartes adjacentes sont réduites et attenuees. Cela crée un effet de focus naturel sur l'élément central.
Quand l'utiliser :
- Témoignages : Mettre en avant un témoignage à la fois
- Visuels clés : Portfolio, lookbook, creations
- Produits phares : Un produit vedette au centre avec les alternatives sur les côtés
- Citations : Bloc Quote avec une citation mise en lumiere
Réglages spécifiques au Spotlight :
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Scale centre | 100-150% | 120% | Taille de la carte centrale |
| Scale adjacent | 50-120% | 85% | Taille des cartes immédiatement à côté |
| Scale eloigne | 40-100% | 65% | Taille des cartes plus eloignees |
| Scale tres eloigne | 30-90% | 50% | Taille des cartes les plus eloignees (7+ cartes) |
| Opacite centre | 80-100% | 100% | Opacite de la carte centrale |
| Opacite adjacent | 40-100% | 80% | Opacite des cartes adjacentes |
| Opacite eloigne | 20-100% | 50% | Opacite des cartes eloignees |
| Opacite tres eloigne | 10-90% | 30% | Opacite des cartes les plus eloignees |
Variante Coverflow
La variante Coverflow ajoute un veritable effet 3D avec perspective, rotation et profondeur. Les cartes laterales sont tournees en 3D et reculent en profondeur, recreant l'effet iconique d'iTunes/Apple Music.
Quand l'utiliser :
- Portfolios et vitrines visuelles
- Produits premium qui meritent une présentation immersive
- Images impactantes : photographie, art, mode
- Pages où vous voulez un effet "wow"
4 styles de Coverflow :
| Style | Description | Idéal pour |
|---|---|---|
| Apple | Effet 3D équilibré inspire d'iTunes, rotation 45deg, profondeur moderee | La plupart des cas, aspect professionnel |
| Dramatic | Rotation prononcee, grande profondeur, contraste fort entre centre et bords | Impact visuel maximal, landing pages |
| Minimal | Rotation subtile, faible profondeur, transition douce | Design épuré, contenu qui parle de lui-même |
| Custom | Tous les paramètres 3D réglables manuellement | Controle total pour les designers |
Réglages du mode Custom :
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Perspective | 400-2000px | 1000px | Distance de la camera 3D. Plus la valeur est basse, plus l'effet 3D est prononce |
| Angle de rotation | 15-75deg | 45deg | Angle de rotation des cartes laterales |
| Z centre | 0-150px | 50px | Avancee de la carte centrale vers l'utilisateur |
| Z adjacent | -200 a 0px | -50px | Profondeur des cartes immédiatement à côté |
| Z eloigne | -300 a 0px | -120px | Profondeur des cartes plus eloignees |
| Z tres eloigne | -400 a 0px | -200px | Profondeur des cartes les plus eloignees |
| Scale centre | 100-130% | 105% | Taille de la carte centrale |
| Opacite adjacent | 40-100% | 80% | Opacite des cartes adjacentes |
| Opacite eloigne | 10-80% | 50% | Opacite des cartes eloignees |
| Overlap | -80 a 0px | -30px | Chevauchement des cartes (valeurs negatives = plus de chevauchement) |
Effet Reflection :
Le Coverflow propose un effet de reflection optionnel qui affiche un reflet miroir sous chaque carte, rappelant l'esthétique Apple classique.
| Réglage | Description |
|---|---|
| Reflection | On / Off - Active le reflet sous les cartes |
| Opacite du reflet | 10-60% - Intensité du reflet |
Les 9 types de blocs
La section Carousel accepte 9 types de blocs différents que vous pouvez mixer librement dans le même carousel. Chaque type est optimisé pour un usage spécifique.
1. Slide (Carte image/video)
Le bloc le plus complet. Il combine un media (image ou video) avec du contenu textuel optionnel.
Champs disponibles :
| Champ | Type | Description |
|---|---|---|
| Type de media | Image / Video | Image fixe ou video (hébergée ou YouTube/Vimeo) |
| Image | Image picker | L'image du slide |
| Video | Video picker | Video Shopify hébergée |
| URL Video | URL | Lien YouTube ou Vimeo |
| Ratio media | Adapt / Carre / Portrait / Paysage / 16:9 | Proportions de l'image/video |
| Border radius | 0-40px | Arrondi des coins du media |
| Afficher le contenu | On / Off | Active le contenu textuel |
| Position du contenu | En dessous / Overlay | Texte sous l'image ou par-dessus |
| Position overlay | 9 positions | top-left a bottom-right (si overlay active) |
| Sous-titre | Texte | Texte court au-dessus du titre |
| Titre | Richtext inline | Titre principal avec formatage |
| Texte | Richtext | Description sous le titre |
| Auteur | Texte | Nom d'auteur (optionnel) |
| Bouton | Texte + URL + Style | CTA avec 3 styles de bouton |
| Overlay | Opacite + Couleur | Si contenu en overlay |
2. Product (Carte produit)
Affiche une carte produit Shopify standard avec image, titre, prix et bouton d'ajout au panier.
Champs disponibles :
| Champ | Type | Description |
|---|---|---|
| Produit | Product picker | Le produit Shopify a afficher |
3. Quote (Citation)
Bloc optimisé pour les citations et témoignages avec une mise en forme editoriale.
4. Collection (Carte collection)
Affiche une carte collection avec image de fond et nom de la collection, renvoyant vers la page collection.
5. Video
Integre une video directement dans un slide du carousel.
6. Feature (Avantage)
Bloc concu pour presenter un avantage ou une feature avec une icône, un titre et une description.
Idéal pour :
- Section "Pourquoi nous choisir"
- Avantages concurrentiels
- Features produit
7. Stat (Chiffre clé)
Bloc pour afficher un chiffre clé avec un label, idéal pour les sections de preuves chiffrees.
Idéal pour :
- Chiffres de l'entreprise
- KPIs et metriques de confiance
- Preuves sociales chiffrees
8. CTA (Call-to-Action)
Bloc dédié aux appels à l'action avec un titre impactant et un bouton.
Idéal pour :
- Promotions et offres speciales
- Inscriptions newsletter
- Liens vers des landing pages
9. Image (Image seule)
Bloc image simple sans contenu textuel, pour des carousels purement visuels.
Idéal pour :
- Galeries photo et lookbooks
- Portfolios visuels
- Effet Coverflow avec de belles images
Mixer les types de blocs
L'un des atouts majeurs du Carousel est la possibilite de mixer différents types de blocs dans le même carousel pour créer des sections uniques.
Combinaisons suggerees :
| Combinaison | Usage |
|---|---|
| Feature + Stat + CTA | Section "Pourquoi nous choisir" |
| Quote + Image | Témoignages visuels |
| Product + CTA | Vitrine produit avec offre speciale |
| Collection + Slide | Présentation de collections avec contenu éditorial |
| Slide + Video | Lookbook avec videos backstage |
Cartes par vue (Slides per view)
Le nombre de cartes visibles simultanément se configure séparément pour chaque device.
| Device | Range | Défaut |
|---|---|---|
| Desktop | 1-7 | 3 |
| Tablette | 1-5 | 2 |
| Mobile | 1-5 | 1 |
- 1 carte : Slideshow pleine largeur, témoignages individuels, visuels hero
- 2 cartes : Comparaison avant/après, duo de produits, contenu éditorial
- 3 cartes (défaut) : La plupart des cas, bon équilibré taille/densite
- 4 cartes : Catalogues produit, features multiples, grilles denses
- 5-7 cartes : Logos partenaires, mini-cartes, mode Coverflow/Spotlight
Navigation et pagination
Flèches de navigation
| Réglage | Options | Description |
|---|---|---|
| Afficher | On / Off | Active les flèches de navigation |
| Position | Overlay / External / Below | Emplacement des flèches |
| Style d'icône | Flèche / Chevron | Forme de la flèche |
| Taille icône | 16-32px | Taille des flèches |
| Fond | Transparent / Background / Foreground / Accent 1 / Accent 2 | Couleur de fond du bouton |
| Couleur icône | Background / Foreground / Accent 1 / Accent 2 | Couleur de la flèche |
Pagination (dots)
| Réglage | Options | Description |
|---|---|---|
| Afficher | On / Off | Active les dots de pagination |
| Position | Overlay / External | Superposee ou sous le carousel |
| Taille | 8-20px | Taille des dots |
| Couleur | Background / Foreground / Accent 1 / Accent 2 | Couleur des dots |
Comportement du carousel
| Réglage | Options | Description |
|---|---|---|
| Autoplay | On / Off | Defilement automatique |
| Vitesse autoplay | 3-10s | Intervalle entre chaque transition |
| Loop | On / Off | Revient au debut après le dernier slide |
| Infinite Loop | On / Off | Defilement infini sans interruption (non dispo en Coverflow) |
| Click navigation | On / Off | Cliquer sur un slide adjacent pour y accéder |
| Type d'animation | Slide / Fade | Uniquement si 1 carte par vue |
Layout et espacement
| Réglage | Range | Défaut | Description |
|---|---|---|---|
| Gap | 0-100px | 0px | Espacement entre les slides |
| Border radius | 0-50px | 0px | Arrondi des coins de chaque slide |
| Alignement desktop | Gauche / Centre / Droite | Centre | Alignement du contenu textuel |
| Alignement mobile | Gauche / Centre / Droite | Centre | Alignement sur mobile |
Les 4 presets pre-configurés
Quand vous ajoutez la section Carousel, 4 presets sont disponibles pour demarrer rapidement :
1. Spotlight
- Variante : Spotlight
- Largeur : Full width
- 5 slides desktop, 3 tablette, 1 mobile
- Autoplay actif (5s), loop actif
- Gap 20px, border radius 12px
- Scale centre 130%, adjacent 85%, eloigne 70%
2. Multi-Card (Standard)
- Variante : Standard
- Largeur : Normal (page width)
- 4 slides desktop, 2 tablette, 1 mobile
- Autoplay désactivé, loop actif
- Gap 25px, border radius 16px
- Navigation en position external, pas de dots
3. Coverflow
- Variante : Coverflow, style Apple
- Largeur : Full width
- 5 slides desktop, 3 tablette, 1 mobile
- Autoplay actif (5s), loop + infinite loop
- Gap 15px, border radius 12px
- Effet 3D style Apple
4. Product Showcase
- Variante : Coverflow, style Minimal
- Largeur : Full width
- 5 slides desktop, 3 tablette, 1 mobile
- Autoplay actif (6s), loop + infinite loop
- Gap 20px, border radius 16px
- Navigation en position "below", dots en external
Exemples de configuration par usage
Slider de produits (e-commerce)
- Variante : Standard
- Cartes par vue : 4 desktop, 2 tablette, 1 mobile
- Blocs : Product
- Gap : 20px
- Border radius : 8px
- Navigation : External
- Autoplay : Off (l'utilisateur browse)
Témoignages clients
- Variante : Spotlight
- Cartes par vue : 3 desktop, 1 tablette, 1 mobile
- Blocs : Quote
- Scale centre : 120%
- Autoplay : On (5s)
- Loop : On
Galerie visuelle / Lookbook
- Variante : Coverflow, style Apple
- Cartes par vue : 5 desktop, 3 tablette, 1 mobile
- Blocs : Image
- Reflection : On
- Autoplay : On (4s)
- Gap : 10px
Section "Pourquoi nous choisir"
- Variante : Standard
- Cartes par vue : 3 desktop, 2 tablette, 1 mobile
- Blocs : Mix de Feature + Stat + CTA
- Gap : 30px
- Border radius : 16px
- Autoplay : Off
Bandeau de logos partenaires
- Variante : Standard
- Cartes par vue : 6 desktop, 4 tablette, 3 mobile
- Blocs : Image
- Gap : 40px
- Autoplay : On, Infinite Loop
- Navigation : Off, Dots Off
Bonnes pratiques
Prochaines étapes
- Carrousel de collections — Slider spécifique aux collections
- Carrousel de reviews — Slider d'avis clients
- Animations — Effets d'animation sur le carrousel
- Cartes produit — Personnalisez les cartes dans le slider