Créer une présentation
Quelle que soit la méthode d'installation choisie, vous devriez avoir un fichier HTML qui ressemble à ça:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de mon diaporama</title>
<script defer src="./chemin_vers_le_script.js"></script>
</head>
<body>
<div id="cjs-slider">
</div>
</body>
</html>
Une slide est un
div avec la classe cjs-slide. Pour créer une slide on écrit donc:<div class="cjs-slide">
<!-- Ici le contenu de la slide -->
</div>
Vous pouver déjà assigner une couleur d'arrière plan à votre slide en utilisant CSS, soit dans un fichier séparé, soit directement sur la balise:
<div class="cjs-slide" style="background-color: #fa6756">
Ma première slide
</div>
Vous pouvez ajouter une slide supplémentaire afin de voir les transitions:
<div class="cjs-slide" style="background-color: #8e44ad">
Ma deuxième slide
</div>
Votre fichier HTML ressemble maintenant à ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de mon diaporama</title>
<script defer src="./chemin_vers_le_script.js"></script>
</head>
<body>
<div id="cjs-slider">
<div class="cjs-slide" style="background-color: #f00">
Ma première slide
</div>
<div class="cjs-slide" style="background-color: #8e44ad">
Ma deuxième slide
</div>
</div>
</body>
</html>
Il est temps de voir le résultat ! Ouvrez votre fichier HTML dans un navigateur et utilisez les flèches de votre clavier, la molette ou les commandes à l'écran pour changer de diapo.
Voici votre premier diaporama ColorJS ! Vous pouvez ajouter votre propre fichier CSS pour modifier votre mise en page, et complexifier le contenu autant que vous le souhaitez.
Last modified 3yr ago