Merge pull request #115 from rko0211/main

Make the carousel automatic
Soumyajit2825 · Jan 13, 2024 · 60c2275 · 60c2275
2 parents e3dafde + bfb1c21
commit 60c2275
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 40 deletions.
diff --git a/app.js b/app.js
@@ -34,7 +34,7 @@ _switch?.addEventListener("click", () => {
     moon.style.transform = "translateX(0)";
     moon.style.opacity = "0";
 
-   removeDarkTheme()
+    removeDarkTheme()
 
     theme = "light";
   }
@@ -62,21 +62,22 @@ window.onload = () => {
 };
 
 
-function applyDarkTheme(){
+function applyDarkTheme() {
   main.classList.add("darkTheme");
   document.getElementById("STATS").classList.add("darkTheme")
 
   document.getElementsByClassName("main-info")[0].classList.add("darkTheme")
   secondary_heading.forEach((heading) => {
     heading.classList.add("darkTheme")
   })
-  document.querySelectorAll(".blackText").forEach((Txt)=>
-  Txt.style.color = "white"
-  )
+  document.querySelectorAll(".blackText").forEach((Txt) =>
+    Txt.style.color = "white"
+
   document.getElementById('myDiv').style.backgroundImage = "url('Image/im1.png')";
 
+
 }
-function removeDarkTheme(){
+function removeDarkTheme() {
 
   main.classList.remove("darkTheme");
   document.getElementById("STATS").classList.remove("darkTheme")
@@ -85,8 +86,8 @@ function removeDarkTheme(){
     heading.classList.remove("darkTheme")
   })
 
-  document.querySelectorAll(".blackText").forEach((Txt)=>
-  Txt.style.color = "black"
+  document.querySelectorAll(".blackText").forEach((Txt) =>
+    Txt.style.color = "black"
   )
   document.getElementById('myDiv').style.backgroundImage = "url('Image/im2.png')";
 }
@@ -95,23 +96,23 @@ function navSlide() {
   const burger = document.querySelector(".burger");
   const nav = document.querySelector(".div-navbar");
   const navLinks = document.querySelectorAll(".div-navbar a");
-  
+
   burger.addEventListener("click", () => {
-      //Toggle Nav
-      nav.classList.toggle("nav-active");
-      
-      //Animate Links
-      navLinks.forEach((link, index) => {
-          if (link.style.animation) {
-              link.style.animation = ""
-          } else {
-              link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
-          }
-      });
-      //Burger Animation
-      burger.classList.toggle("toggle");
+    //Toggle Nav
+    nav.classList.toggle("nav-active");
+
+    //Animate Links
+    navLinks.forEach((link, index) => {
+      if (link.style.animation) {
+        link.style.animation = ""
+      } else {
+        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
+      }
+    });
+    //Burger Animation
+    burger.classList.toggle("toggle");
   });
-  
+
 }
 
 navSlide();
@@ -126,13 +127,13 @@ navSlide();
 
 // document.querySelector('.pop-up').classList.remove('.pop-up');
 //     document.querySelector('.pop-up').classList.add('.pop-up-rem');
-document.querySelectorAll('.pop img').forEach(im =>{
-  im.onclick = () =>{
+document.querySelectorAll('.pop img').forEach(im => {
+  im.onclick = () => {
     document.querySelector('.pop-up').style.display = 'flex';
     document.querySelector('.pop-up img').src = im.getAttribute('src');
   }
 });
 
-document.querySelector('.pop-up span').onclick = () =>{
+document.querySelector('.pop-up span').onclick = () => {
   document.querySelector('.pop-up').style.display = 'none';
 };
diff --git a/index.html b/index.html
@@ -180,9 +180,11 @@ <h2 class="secondary_heading" id="STATS">STATS</h2>
     <section class="video-area">
       <h2 class="secondary_heading" id="VIDEOS">VIDEOS</h2>
       <!-- Flickity HTML init -->
-      <div class="carousel" data-flickity='{ "wrapAround": true ,"setGallerySize": false}'>
+      <div class="carousel"
+        data-flickity='{ "wrapAround": true, "autoPlay": true, "setGallerySize": false, "direction": "rtr"}'>
         <div class="carousel-cell"><video src="Video/videoplayback.mp4"
-            poster="Image/0_GettyImages-1313922671jpgong.jpg" class="clip" type="video/mp4" loop controls></video></div>
+            poster="Image/0_GettyImages-1313922671jpgong.jpg" class="clip" type="video/mp4" loop controls></video>
+        </div>
         <div class="carousel-cell"><video
             src="Video/Lionel-Messi-Best-Skill-Whatsapp-Video-Status-Song-Download-Online-2022-1.mp4"
             poster="Image/220807075403-messi-bicycle-kick-0807-restricted-large-169.jpg" class="clip" type="video/mp4"
@@ -373,11 +375,15 @@ <h2 class="secondary_heading" id="VIDEOS">VIDEOS</h2>
 
 
       <h2 class="secondary_heading" id="PHOTOS">PHOTOS</h2>
+
+
+      <div class="img pop loading=" lazy" -row">
+
       <div class="img-row">
+
         <img loading="lazy" src="Image/mini__R5I4403.jpeg" alt="MESSI" style="cursor:pointer" />
         <img loading="lazy" src="Image/messi-ronaldo-1593920966.jpg" alt="MESSI v CR7" style="cursor:pointer" />
-        <img loading="lazy" src="Image/leo-raise.jpg" alt="LM10"
-          width="300px" height="200px" style="cursor:pointer" />
+        <img loading="lazy" src="Image/leo-raise.jpg" alt="LM10" width="300px" height="200px" style="cursor:pointer" />
         <img loading="lazy" src="Image/gettyimages-846141966-612x612.jpg" alt="LIONEL
               MESSI" style="cursor:pointer" />
         <img loading="lazy" src="Image/lionel-messi-hd-wallpaperkwhcv.jpg" alt="Vamos
@@ -392,10 +398,10 @@ <h2 class="secondary_heading" id="PHOTOS">PHOTOS</h2>
         <img loading="lazy" src="Image/Leo.jpg" alt="" style="cursor:pointer;">
         <img loading="lazy" src="Image/Lionel-Messi-Barcelona-Champions-League-final.jpg" alt=""
           style="cursor: pointer;">
-        
+
       </div>
 
-      
+
       <!-- </div> -->
 
 
@@ -571,8 +577,7 @@ <h3 class="blackText">Messi replicated two of Maradona's most
     </ul>
   </footer>
   <!-- JavaScript -->
-  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
-  <script src="./app.js"></script>
+
   <script>
     document.getElementById("year").innerHTML = new Date().getFullYear();
     // Get the button

diff --git a/style.css b/style.css
@@ -822,7 +822,7 @@ main.darkTheme {
   background: #404040;
 }
 
-.pop-up{
+.pop-up {
   position: fixed;
   display: none;
   justify-content: center;
@@ -833,10 +833,10 @@ main.darkTheme {
   height: 100%;
   width: 100%;
   z-index: 100;
-  
+
 }
 
-.pop-up > span{
+.pop-up>span {
   position: absolute;
   top: 100px;
   right: 10px;
@@ -847,7 +847,7 @@ main.darkTheme {
   z-index: 100;
 }
 
-.pop-up > img{
+.pop-up>img {
   border: 20px solid #fff;
   transition-duration: 500ms;
 }
@@ -921,7 +921,7 @@ main.darkTheme {
 
 .info-area .social_link_wikipedia:before {
   background: #d6d6d6;
-    background: radial-gradient(circle at 30% 107%, #ffffff 0%, #c7c7c7 5%, #898989 45%, #bebebe 60%, #686868 90%);
+  background: radial-gradient(circle at 30% 107%, #ffffff 0%, #c7c7c7 5%, #898989 45%, #bebebe 60%, #686868 90%);
 }
 
 .info-area .social_link_instagram:before {
@@ -1510,7 +1510,7 @@ footer a {
     padding: 20px 10px;
   }
 
-  .pop-up > img{
+  .pop-up>img {
     width: 95%;
   }