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>

Créer une slide

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.