Feat: carroussel page d'accueil #3

pierrickmartinet · Mar 26, 2021 · d136694 · d136694
1 parent 58ab8aa
commit d136694
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 3 deletions.
diff --git a/images/chuckjoke1.jpg b/images/chuckjoke1.jpg
diff --git a/images/chuckjoke3.jpeg b/images/chuckjoke3.jpeg
diff --git a/images/chuckjoke5.jpeg b/images/chuckjoke5.jpeg
diff --git a/images/chuckjoke7.jpg b/images/chuckjoke7.jpg
diff --git a/images/chuckjoke8.jpg b/images/chuckjoke8.jpg
diff --git a/refreshing.svg → images/refreshing.svg b/refreshing.svg → images/refreshing.svg
diff --git a/index.html b/index.html
@@ -21,6 +21,12 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
     <script src="scriptIndex.js" defer></script>
 
+    <!-- Carroussel avec plugin jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" defer></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js" defer></script>
+
+
 </head>
 
 <body>
@@ -29,7 +35,7 @@
         <div class="titleHeader">
             <h2 class="textWhite titleFont">Javascript Project</h2>
         </div>
-        <div>
+       <!-- <div>
             <nav>
                 <div>
                     <a href="index.html">Accueil</a>
@@ -41,15 +47,36 @@ <h2 class="textWhite titleFont">Javascript Project</h2>
                     <a href="jeu.html">Jeu</a>
                 </div>
             </nav>
-        </div>
+        </div> -->
+        <div class="dropdown">
+            <button onclick="myFunction()">Menu</button>
+            <div>
+              <a href="index.html">Index</a>
+              <a href="gallerie.html">Gallerie</a>
+              <a href="jeu.html">Jeu</a>
+            </div>
+          </div>
 
     </header>
 
 
     <main>
         <h1 id="titleJavascriptProject">Accueil</h1>
+
+        <!-- Carrousel d'image -->
+
+<div class="fotorama" data-transition="slide" data-loop="true" data-autoplay="3000">
+    <img src="images/chuckjoke1.jpg">
+    <img src="images/chuckjoke3.jpg">
+    <img src="images/chuckjoke5.jpg">
+    <img src="images/chuckjoke7.jpg">
+    <img src="images/chuckjoke8.jpg">
+  </div>
+
+
         <!-- Icone rafraichir la page -->
-            <a href="index.html"><img id="refreshingIcon" src="refreshing.svg" alt="Bouton rafraichir les blagues"></a>
+        <a href="index.html"><img id="refreshingIcon" src="images/refreshing.svg"
+                alt="Bouton rafraichir les blagues"></a>
         <!-- Div contenant les blagues appellé depuis l'API -->
         <div id="feed">
         </div>

diff --git a/style.css b/style.css
@@ -94,4 +94,10 @@ main{
     background-color: #CCDAD1;
     border: 5px solid #000F08;
     border-radius: 20px;
+}
+
+.fotorama{
+display: flex;
+justify-content: center;
+
 }