Slider 3D con CMS in Webflow (nativo + Finsweet)

Puoi costruire uno slider 3D premium in Webflow usando solo il componente Slider nativo, poche righe di CSS e un set di attributi Finsweet — niente librerie pesanti, nessun plugin di terze parti. Parte come una fila piatta e statica di immagini e finisce come un’esperienza immersiva, riflettente e piena di profondità, che puoi puntare su un set di slide fisse o su una collection del CMS con esattamente la stessa interazione.

Ciò che rende tutto questo degno del tuo tempo non è il risultato finale — è capire perché ogni pezzo funziona. Lo slider nativo nasconde una manciata di default che mandano in confusione, la profondità si rivela essere quattro semplici proprietà impilate, e spostare il tutto sul CMS sono tre attributi una volta che conosci l’unico tranello. Afferra il modello mentale e potrai riusare tutto questo su portfolio, gallerie di case study o qualsiasi sezione di contenuti in evidenza.

Come funziona

Lo slider nativo, demistificato. Lo slider è il componente nativo di Webflow, ma alcuni dei suoi default remano contro di te. Anche quando il designer mostra l’altezza come “auto”, Webflow applica di nascosto un’altezza fissa di 300px — quindi la imposti su auto a mano. Il vero trucco per mostrare più slide in una volta vive sulla mask, non sulle slide: la distanza che uno slider percorre a ogni click dipende dalla width della mask, non dalla width della slide. Restringi la mask (al 40%) e cambia il suo overflow da hidden a visible, e vedrai le slide vicine continuando ad avanzare di una alla volta. Ridimensionare invece le slide sembrerebbe identico nel designer ma salterebbe più slide per click. Per tenere tutto pulito imposti children perspective: 700px sulla slide (la base per la rotazione 3D), rendi il content wrapper inline-block con testo centrato così aderisce all’immagine, e limiti le immagini a max-height: 70vh. Webflow assegna anche z-index nascosti dietro le quinte — mask 1, wrapper nav 2, frecce 3 e 4 — ed è per questo che un overlay con z-index: 1 può stare sopra le slide lasciando comunque le frecce cliccabili.

La profondità sono quattro proprietà, non una. Una slide non attiva non è stilizzata da un singolo interruttore 3D — è la somma di quattro cose: una rotazione sull’asse Y (resa tridimensionale da quella children perspective), una scala appena sotto 1, opacità ridotta e saturazione più bassa. Insieme, su uno sfondo quasi nero, spingono le vicine indietro in una foschia sbiadita e grigiastra e lasciano che la slide attiva risalti vivida e in primo piano. Un overlay separato in posizione assoluta, con un gradiente lineare orizzontale (opaco ai bordi, trasparente al centro), fonde la fila nello sfondo a sinistra e a destra per una naturale caduta di luce — con pointer-events: none così non blocca mai l’hover più avanti.

Il riflesso è puro CSS. L’effetto specchio-su-vetro arriva da -webkit-box-reflect — una proprietà solo WebKit che crea un riflesso sotto l’elemento, sfalsato di un piccolo gap, mascherato da un gradiente così sfuma in modo realistico. La parte astuta è il targeting: invece di una classe, il CSS mira a un attributo data-reflect, così lo stesso effetto cade su qualsiasi immagine a prescindere dalle classi che porta. Due cose sono determinanti. L’embed che contiene il CSS dovrebbe stare in cima alla pagina (con una classe global-styles) così si carica subito, e il riflesso — che si comporta come un elemento in posizione assoluta e non aggiunge altezza propria — viene tagliato dall’overflow: hidden del main container. La soluzione è dare al content wrapper vera altezza (100vh) così c’è spazio per il riflesso sotto un’immagine da 70vh.

L’interazione Slider Change, poi il passaggio al CMS. Il movimento arriva dal trigger Slider Change di Webflow, che compare nel pannello interazioni solo dopo aver selezionato una slide. Ti dà due animazioni: slide in view (che diventa attiva) e slide out of view (che esce dall’attiva). Animi il content wrapper dai valori “non attivi” (rotazione 15°, scala 85%, opacità 60%, saturazione 50%) ai valori attivi (rotazione 0, scala 1, opacità 100%, saturazione 100%) con un ease-in-out expo da 800ms — lo stesso easing impostato nelle impostazioni dello slider, così tutto sembra un unico movimento. L’animazione in uscita è semplicemente l’inverso. Il tranello che all’inizio fa sembrare tutto rotto: imposta il trigger su Class, non Element, altrimenti si anima solo la singola slide su cui l’hai costruito. Passare al CMS con la List Slider di Finsweet riusa tutto questo — inietti gli item della collection in un’unica slide vuota tramite due attributi fs-cmsslider-element, e poiché le slide condividono la stessa classe, la tua interazione si applica già. L’unico tranello: gli item del CMS si caricano dopo che l’interazione si è legata, quindi aggiungi fs-cmsslider-reset="true" per far riapplicare a Webflow l’interazione alle slide iniettate. (Effetto collaterale da sapere: dopo un reset la prima slide non è animata come “attiva” al load finché non interagisci una volta.)

Come si usa

1. Costruisci la struttura. Section → container (main-container, padding orizzontale 48px / verticale 64px, max-width 1440px) → content wrapper → Slider. Sullo slider, imposta l’altezza su auto e lo sfondo su trasparente. Nelle sue impostazioni, scegli ease-in-out expo a 800ms, disabilita infinite/repeat slides (fa a pugni con un viewport a più slide), e spegni le label nav rounded e number.

2. Restringi la mask, allinea le slide. Dai una classe alla mask, imposta la sua width al 40%, margin: 0 auto per centrare la prima slide, e (mentre costruisci) overflow visible così vedi le vicine. Dai alle slide una classe condivisa, imposta children perspective: 700px, e allineale verticalmente al centro (middle). Rendi il content wrapper della slide display: inline-block con il testo della slide allineato al centro così aderisce all’immagine. Imposta l’immagine su max-height: 70vh e aggiungi un attributo data-reflect (solo il nome — il valore viene ignorato).

3. Aggiungi l’overlay di caduta luce. Imposta il main container su position: relative e aggiungi un div slider-overlay in posizione assoluta e a piena dimensione, con un gradiente lineare a 90°: sfondo opaco a 0% e 100%, trasparente a 10% e 90%. Dagli z-index: 1 e pointer-events: none. Rimetti overflow: hidden sul main container per eliminare lo scroll orizzontale.

4. Inserisci il CSS del riflesso. Aggiungi un Embed che contiene un blocco <style> con la regola -webkit-box-reflect mirata a [data-reflect] (prendi il CSS esatto dal cloneable). Dai all’embed una classe global-styles e spostalo proprio in cima alla pagina. Poi dai al section content wrapper height: 100vh così il riflesso ha spazio per apparire sotto le immagini.

5. Costruisci l’interazione Slider Change. Seleziona una slide, aggiungi un’interazione Slider Change. In slide in view, anima rotazione (Y), scala, opacità e saturazione del content wrapper dai valori non attivi (15°, 85%, 60%, 50%) ad attivi (0°, 100%, 100%, 100%) a 800ms ease-in-out expo, usando “set as initial state” per i valori di partenza. Duplicala e invertila per slide out of view. Fondamentale: imposta il trigger su Class così si animano tutte le slide.

6. Aggiungi l’interazione hover (opzionale). Sul content wrapper della slide, aggiungi un’interazione Mouse hover che anima blur (0 → 3px) e saturazione (100% → 85%) all’hover in, invertita all’hover out — stesso easing, così è in linea con il resto.

7. Rendilo dinamico dal CMS con Finsweet. Ricostruisci la stessa struttura con un’unica slide vuota, più una Collection List (nascosta con una classe globale) collegata alla tua collection di immagini. Aggiungi lo script della List Slider di Finsweet nell’head della pagina, poi imposta gli attributi dalla tabella di riferimento qui sopra: fs-cmsslider-element="slider" sullo slider, fs-cmsslider-element="list" sulla collection list, e fs-cmsslider-reset="true" sullo slider così l’interazione si riapplica dopo il caricamento degli item. Consulta la documentazione della List Slider di Finsweet per lo script e la sintassi aggiornati.

8. Gestisci la responsività. Su tablet, allarga la mask a ~60% e togli il padding orizzontale del container; su portrait, imposta la mask a ~75% e rimpicciolisci le icone delle frecce (es. 32px → 24px).