diff --git a/.gitignore b/.gitignore
index 30bc162..3320508 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/node_modules
\ No newline at end of file
+/node_modules
+.eslintcache
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
index 36be585..93efa0c 100644
--- 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
deleted file mode 100644
index ed355c9..0000000
Binary files a/img-1.jpeg and /dev/null differ
diff --git a/img-2.jpeg b/img-2.jpeg
deleted file mode 100644
index 80e3962..0000000
Binary files a/img-2.jpeg and /dev/null differ
diff --git a/index.html b/index.html
index 4e77b9d..027b585 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
-
-
diff --git a/person-1.jpeg b/person-1.jpeg
deleted file mode 100644
index c02eed9..0000000
Binary files a/person-1.jpeg and /dev/null differ
diff --git a/script.js b/script.js
index 1f6647b..00e9047 100644
--- 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
index d44bf5a..e2f9eea 100644
--- 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;
+ }
+}