C
C
ColorJS
Search…
Créer une présentation
Quelle que soit la méthode d'installation choisie, vous devriez avoir un fichier HTML qui ressemble à ça:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<title>Titre de mon diaporama</title>
6
7
<script defer src="./chemin_vers_le_script.js"></script>
8
</head>
9
<body>
10
<div id="cjs-slider">
11
12
</div>
13
14
</body>
15
</html>
Copied!

Créer une slide

Une slide est un div avec la classe cjs-slide. Pour créer une slide on écrit donc:
1
<div class="cjs-slide">
2
<!-- Ici le contenu de la slide -->
3
</div>
Copied!
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:
1
<div class="cjs-slide" style="background-color: #fa6756">
2
Ma première slide
3
</div>
Copied!
Vous pouvez ajouter une slide supplémentaire afin de voir les transitions:
1
<div class="cjs-slide" style="background-color: #8e44ad">
2
Ma deuxième slide
3
</div>
Copied!
Votre fichier HTML ressemble maintenant à ceci:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<title>Titre de mon diaporama</title>
6
7
<script defer src="./chemin_vers_le_script.js"></script>
8
</head>
9
<body>
10
<div id="cjs-slider">
11
<div class="cjs-slide" style="background-color: #f00">
12
Ma première slide
13
</div>
14
<div class="cjs-slide" style="background-color: #8e44ad">
15
Ma deuxième slide
16
</div>
17
</div>
18
</body>
19
</html>
Copied!
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 1yr ago
Copy link