Slider Before After pour mes réalisations produits
Unulducode
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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>
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:
- Slider Before After pour mes réalisations produits
- Ryanair produits interdits en cabine - Guide
- Msi after - Télécharger - Optimisation
- Cle de produits windows 8.1 - Guide
- Wow slider - Télécharger - Présentation
- Effet miroir after effect - Forum After Effects
1 réponse
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
>> 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 !
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 !