V3.4 week3

Created the 3 buttons autoback autoforward and stop. Added heir html tags and added their functionalities using JavaScript.

Author: davappler

Week-3/Homework/mandatory/3-slideshow/index.html

@@ -16,8 +16,11 @@
     <img class="image" src="https://images.unsplash.com/photo-1595855524159-6a89fe9fa0f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" 
                       alt="Slider images">
     <div class="button-container">
+      <button class="auto-back"> AutoBack </button>
       <button class="back"> Back </button>
+      <button class="stop"> Stop </button>
       <button class="forward"> Forward </button>
+      <button class="auto-forward"> auto forward </button>
     </div>
 
   </body>

Week-3/Homework/mandatory/3-slideshow/slideshow.js

@@ -3,9 +3,9 @@
 window.onload=function()
 {
     var imageSource=[
-        "https://images.unsplash.com/photo-1595589981991-7f37459639c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
-        "https://images.unsplash.com/photo-1595100930017-8d4112e87959?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
-        "https://images.unsplash.com/photo-1595024600400-2a49b9fce270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+        " https://images.unsplash.com/photo-1595882625224-eeaced8da8fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
+        " https://images.unsplash.com/photo-1569531964322-7bced896a6a8?ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80",
+        " https://images.unsplash.com/photo-1569165962688-d5ae57b32dc0?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
         "https://images.unsplash.com/photo-1508269757141-a5eaf8a31ef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
         "https://images.unsplash.com/photo-1432889490240-84df33d47091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
         "https://images.unsplash.com/photo-1484896104369-90eb48a7596b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
@@ -14,11 +14,52 @@ window.onload=function()
 
     let backButton=document.querySelector(".back");
     let forwardButton=document.querySelector(".forward");
+    let autoBack=document.querySelector(".auto-back");
+    let autoForward=document.querySelector(".auto-forward");
+    let stop=document.querySelector(".stop");
 
     var imageEl=document.querySelector(".image");
     var currentIndex=0;
+    var slideshow1;
+    var slideshow2;
+
+
+    autoForward.addEventListener("click", function(){
+        clearInterval(slideshow2);
+
+         slideshow1=setInterval(function(){
+            if(currentIndex <0 || currentIndex >= imageSource.length )
+            {
+                
+                currentIndex=0;
+                return;
+            }
+            console.log(currentIndex);
+            imageEl.src=imageSource[currentIndex];
+            currentIndex=currentIndex+1;
+
+        },1000);
+    });
+
+    autoBack.addEventListener("click", function(){
+        clearInterval(slideshow1);
+
+        console.log("autoback index"+ currentIndex);
+
+         slideshow2=setInterval(function(){
+            if(currentIndex < 0 || currentIndex >= imageSource.length )
+            {
+                currentIndex=imageSource.length-1;
+            }
+            console.log(currentIndex);
+            imageEl.src=imageSource[currentIndex];
+            currentIndex=currentIndex-1;
+        },1000);
+    });
 
     backButton.addEventListener("click",function(){
+        clearInterval(slideshow1);
+        clearInterval(slideshow2);
         if(currentIndex <= 0)
             return;
         else
@@ -27,9 +68,10 @@ window.onload=function()
             imageEl.src=imageSource[currentIndex];
         }
 
-
     });
     forwardButton.addEventListener("click",function(){
+        clearInterval(slideshow1);
+        clearInterval(slideshow2);
         if(currentIndex >= imageSource.length -1)
             return
         else{
@@ -38,4 +80,9 @@ window.onload=function()
         }    
 
     });
+
+    stop.addEventListener("click",function(){
+        clearInterval(slideshow1);
+        clearInterval(slideshow2);
+    })
 }