Classes utilizadas
card
slider
imgSlide
Código CSS
/* CARDS */
.card{
filter: saturate(0);
transition: all .3s;
cursor: pointer;
}
.card.active{
filter: saturate(1);
background: white !important;
box-shadow: 12px 12px 32px rgba(0 0 0 / .2);
transform: translateY(-3px);
}
/* IMAGENS */
.imgSlide{
opacity: 0;
transition: all .3s
}
.imgSlide.active{
opacity: 1
}
Código Widget HTML
<script>
let cards = document.querySelectorAll(".card");
let imagens = document.querySelectorAll(".imgSlide");
cards.forEach((card, indice) => {
card.onclick = () => {
cardAtivo = document.querySelector(".card.active");
cardAtivo.classList.remove("active");
card.classList.add("active");
imagemAtiva = document.querySelector(".imgSlide.active");
imagemAtiva.classList.remove("active");
console.log(imagemAtiva);
imagens[indice].classList.add("active");
}
})
</script>
