Animation branch

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -1,3 +1,4 @@
 # Slider
 
 - Had problem while making the image disappear
+- Added animation now and now this slider is as per the description

script.js

@@ -46,7 +46,11 @@ function createImage(src, alt, dataId) {
   imgContainer.innerHTML = ''
   // creation of image
   const image = document.createElement('img')
+  // added class that makes image responsive
   image.classList.add('responsive-img')
+  // added class that helps in animation
+  image.classList.add('fade')
+
   image.setAttribute('src', src)
   image.setAttribute('alt', alt)
   image.setAttribute('data-id', dataId)

style.css

@@ -23,7 +23,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  /* this might eat the part of image if the images dont respect the aspect ratio of 1:1*/
+  /* this might eat the part of image 
+  if the images don't respect the aspect ratio */
   height: 50%;
   width: 50%;
   /* background-color: red; */
@@ -52,3 +53,21 @@
   cursor: pointer;
   color: #fff;
 }
+/* animation */
+/* inspired from w3school*/
+
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+@keyframes fade {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}