Créer une présentation

ColorJS

Search…

Français

Accueil

Official site

Création d'un diaporama

Démarrer

Créer une présentation

Transitions

Animations individuelles

Masque des diapositives

Fonctions avancées

Synchronisation entre plusieurs appareils

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.
​

Démarrer

Transitions

Last modified 1yr ago

Copy link

Contents

Créer une slide

Créer une slide

​