Tous nos scripts

Images

Créer un effet Avant / Après sur une image

Insérer ce code dans le <head> de la page :

<link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">

Celui-ci dans le <body> :

<script>src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
<script>
	new BeerSlider(document.getElementById('slider'));
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

Insérer ce code dans le <head> de la page :

<link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">

Celui-ci dans le <body> :

<script>src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
<script>
	new BeerSlider(document.getElementById('slider'));
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Nom

Valeur

Nom

Copié !

Valeur

Copié !

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

Insérer ce code dans le <head> de la page :

<link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">

Celui-ci dans le <body> :

<script>src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>
<script>
	new BeerSlider(document.getElementById('slider'));
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

  • Ajouter les scripts dans le head et body
  • Changer l'ID (ici slider) du wrapper de vos 2 images
  • Insérer la 1ère image en tant qu'enfant du wrapper
  • Insérer la 2ème au sein d'une autre div (cette div doit être enfant du wrapper)
Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.