Getting There!..

HimAYouN · Aug 16, 2023 · 72c1add · 72c1add
1 parent 79bdf12
commit 72c1add
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/week4/image_Slider/index.html b/week4/image_Slider/index.html
@@ -19,7 +19,7 @@
     </div>
 
     <a href="" class="pre" onclick="plusSide(-1)">PREVIOUS</a>
-    <a href="" class="next" onclick="plusSide(1)">NEXT</a>
+    <button href="" class="next" id="nextButton">NEXT</button>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/week4/image_Slider/script.js b/week4/image_Slider/script.js
@@ -1,8 +1,22 @@
 const slides = document.querySelectorAll('.slide');
 // console.log(slides)
-var counter = 0;
+var n = 0;
+let nextButton = document.getElementById('nextButton');
+nextButton.addEventListener('click', ()=>{
+    n = Math.floor(Math.random()*slides.length);
+    for(var i = 0; i<slides.length; i++){
+        if(i!=n){
+            slides[i].classList.add('slide');
+        }
+    }
+    console.log(n);
+    slides[n].classList.toggle('display');
+    slides[n].classList.toggle('slide');
 
+})
 
-function plusSide(n){
-    slides[n].style.display = 'block';
-}
+// function plusSide(n){
+//     slides[n].classList.toggle('.display');
+//     slides[n].classList.toggle('.slide');
+
+// }
diff --git a/week4/image_Slider/style.css b/week4/image_Slider/style.css
@@ -22,14 +22,20 @@
 .slide{
     display: none;
     width: 100%; 
-     height: 100%;    
+    height: 100%;    
+    position: absolute;
+}
+.display{
+    display: block;
+    width: 100%; 
+    height: 100%;    
     position: absolute;
 }
 
-.container:hover{
+/* .container:hover{
     box-shadow: 20px 20px 40px white
     ,-20px -20px 40px white
     ,20px -20px 40px white
     ,-20px 20px 40px white
     ;
-}
+} */