Slider Before After pour mes réalisations produits

Fermé
Unulducode - 10 mai 2022 à 12:49
jordane45 Messages postés 38140 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 - 10 mai 2022 à 20:34
Bonjour à tous,

Je souhaite faire un effet sur mon site before after avec deux images.
J'ai trouvé un code mais, étant assez nul, je n'arrive pas à y mettre mes images.
Je mets le code ici.
Merci de vos réponses :)


<html lang="en">
<head>
<title>slider-before-after</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../src/styles/main.css"/>
<link rel="stylesheet" href="../src/styles/custom-range-input.css"/>
<link rel="stylesheet" href="styles/main.css"/>
</head>
<body>


<div class="slider-before-after">
<div class="slider-before-image">
<img src=" " />
</div>
<div class="slider-after-image">
<img src=" " />
</div>
<input type="range" class="slider-track"/>
</div>

<div class="slider-before-after">
<div class="slider-before-image">
<img src=" " />
</div>
<div class="slider-after-image">
<img src=" " />
</div>
<input type="range" class="slider-track"/>
</div>

<script src="../src/scripts/slider-before-after.js"></script>

</body>
</html>
A voir également:

1 réponse

jordane45 Messages postés 38140 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
10 mai 2022 à 20:34
Bonjour,

Déjà, il faut utiliser les balises de code lorsque tu postes du code sur le forum
(explications à lire entièrement, disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code)

Ensuite, ben.. pour avoir des images... il faut renseigner leur chemin dans les attributs SRC de tes balises img
<img src="chemin/vers/ton/image.jpeg" />

>> Attention à bien respecter les majuscules/minuscules dans le nom des fichiers/répertoires du chemin que tu indiques.


Si ça ne marche pas après ça .. faudra nous montrer également le code de tes fichiers css et js !
0