Slider avant/après

Javascript

HTML

CSS

Auteur

Démo lecture seule

Voir

Démo live

Voir

Copie-colle ce script dans le <body> de ton site Webflow

Ajoute ce script sur ton site Webflow pour rendre fonctionnel ton slider avant/après

Copier

Tuto vidéo

Construis ton slider avant/après

Structure HTML

Ajoute une "div" avec la classe "before-after", puis à l'intérieur places-y 2 éléments "image" avec les classes "after" et "before" et ajoute les images de ton choix.

‍

Style CSS à appliquer dans Webflow

Pour le style réfères-toi à l'exemple de démonstration ou applique les propriétés ci-dessous.

‍Élément avec la classe "before-after":

position: relative
display: block
overflow: hidden
cursor: grab
user-select: none (facultatif) -> À placer dans les "Custom properties"

‍

‍Élément avec la classe "before":

display: block
position: absolute
top: 0
left: 0
width: 100%
height: 29rem (En fonction de la taille des images que tu souhaites)
fit: cover
pointer-events: none
clip-path: inset(0 50% 0 0) -> À placer dans les "Custom properties"

‍

Élément avec la classe "after":

display: block
width: 100%
height: 29rem (En fonction de la taille des images que tu souhaites)

Plus de scripts Premium ?

Ajoute un slider interactif sur ton site Webflow avec un effet Avant/Après

Player video Youtube optimisé

Marre de voir tes performances Page Speed Insight réduites à néant à cause d'une seule vidéo dans ta page ? Voici un script pour te permettre d'ajouter une vidéo sans impacter les performances !

Voir