adarshmaharjan · adarshmaharjan · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-/node_modules
+/node_modules
+.eslintcache
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/README.md b/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
diff --git a/img-1.jpeg b/img-1.jpeg
diff --git a/img-2.jpeg b/img-2.jpeg
diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <!-- <header><h1>Slider</h1></header> -->
     <main>
       <section class="slider-container">
         <div class="image-container"></div>
@@ -18,7 +17,6 @@
         </div>
       </section>
     </main>
-
     <!-- javascript -->
     <script src="./script.js"></script>
   </body>

diff --git a/person-1.jpeg b/person-1.jpeg
diff --git a/script.js b/script.js
@@ -25,28 +25,50 @@ const nextBtn = document.querySelector('.next-btn')
 
 // global variables
 let count = 0
+let opacity = 0
+
+// let imgElement = ni
 
 // functions
 
 // decrement function
 function decrement() {
   count -= 1
-  if (count < 0) count = images.length
+  if (count < 0) count = images.length - 1
   //   console.log(count)
 }
 // increment
 function increment() {
   count += 1
-  if (count >= images.length) count = 0
+  if (count === images.length) count = 0
   //   console.log(count)
 }
+function changeImage(src, alt, dataId) {
+  const imgElement = document.querySelector('.responsive-img')
+  // imgElement.classList.add('fade')
+  imgElement.style.opacity = 0.4
+  const fadeInterval = setInterval(() => {
+    // console.log('on interval')
+    opacity += 0.2
+    imgElement.style.opacity = opacity
+    if (opacity === 1) {
+      opacity = 0
+      clearInterval(fadeInterval)
+    }
+  }, 200)
+  imgElement.setAttribute('src', src)
+  imgElement.setAttribute('alt', alt)
+  imgElement.setAttribute('dataId', dataId)
+}
 // create image
 function createImage(src, alt, dataId) {
-  // remove image
-  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)
@@ -56,14 +78,14 @@ function createImage(src, alt, dataId) {
 prevBtn.addEventListener('click', () => {
   decrement()
   const { name, src } = images[count]
-  createImage(src, name, count)
+  changeImage(src, name, count)
   //   console.log(count)
 })
 // next button
 nextBtn.addEventListener('click', () => {
   increment()
   const { name, src } = images[count]
-  createImage(src, name, count)
+  changeImage(src, name, count)
 })
 
 // Execution

diff --git a/style.css b/style.css
@@ -8,9 +8,12 @@
   display: inline-block;
   max-width: 100%;
 }
-.hidden-img {
-  opacity: 0;
+/* .translucent-img {
+  opacity: 0.2;
 }
+.visible-image {
+  opacity: 1;
+} */
 .slider-container {
   position: relative;
   width: 100%;
@@ -23,7 +26,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 +56,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;
+  }
+}