I'm working on an image slider for one of my project and I'm stuck here - every time I click on the thumbnail image the main image has to appear with some fade-in animation. Do know where I'm doing wrong. First time when the page loads then the class "fadein" is being applied but after it stays intact the fadein doesnt work. Any clue?
HTML
var el = document.getElementById("ImageSlider");
//var removefadein = document.querySelector(".fade-in");
function imgSlider(newimage) {
el.src = newimage;
//el.classList.add("fade-in");
}
//el.delay('5000').classList.remove("fade-in");
//removefadein.classList.remove("fade-in"); * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Serif', serif;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section #ImageSlider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section ul.thumbnails {
position: absolute;
bottom: 50px;
left: 50%;
display: flex;
transform: translateX(-50%);
justify-content: center;
align-items: center;
list-style: none;
z-index: 999;
}
section ul.thumbnails li {
margin: 1em;
cursor: pointer;
}
section ul.thumbnails li img {
border: 2px solid black;
max-height: 5em;
padding: 0;
margin: 0;
}
.fade-in {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}<section>
<img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider">
<ul class="thumbnails">
<li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li>
<li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li>
</ul>
</section>Not quite sure about logic behind this, but here is a working fix: maybe someone else can explain it better.
fix logic is that you have to on click:
I think your problem is that you have visible element from 0-1 on load. Then you didn't set it back to 0, your animation class does not do that, it just say to animate from 0 to 1, but there was no starting opacity 0 to start from.
var el = document.getElementById("ImageSlider");
function imgSlider(newimage) {
el = document.getElementById("ImageSlider");
el.src = newimage;
console.clear();
console.log(window.getComputedStyle(el).opacity);
if (window.getComputedStyle(el).opacity > 0) {
console.log(true);
el.style.opacity = 0;
el.classList.remove("fade-in");
setTimeout(function() {
el.classList.add("fade-in");
el.style.opacity = 1;
}, 100);
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
font-size: 18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Noto Serif', serif;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section #ImageSlider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section ul.thumbnails {
position: absolute;
bottom: 50px;
left: 50%;
display: flex;
transform: translateX(-50%);
justify-content: center;
align-items: center;
list-style: none;
z-index: 999;
}
section ul.thumbnails li {
margin: 1em;
cursor: pointer;
}
section ul.thumbnails li img {
border: 2px solid black;
max-height: 5em;
padding: 0;
margin: 0;
}
.fade-in {
animation: fadein 4s;
-moz-animation: fadein 4s;
/* Firefox */
-webkit-animation: fadein 4s;
/* Safari and Chrome */
-o-animation: fadein 4s;
/* Opera */
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<section>
<img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider">
<ul class="thumbnails">
<li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li>
<li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li>
</ul>
</section>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments