I really need help with this. I'm building a slider with swiper js
I have a product with few options, the idea is to filter the images that don't match with the option selected.
I know swiper has a lot of method and events, but the closest I found was the removeSlide and add/append Slide, which eliminates the element from the DOM. So I did it with plain javascript, hidden the images with css like this:
if (event.target.name.includes("Color")){
images.forEach((image)=>{
if (!image.dataset.thumbColor.includes(color)){
image.classList.add('hidden');
swiper.swiper.update();
swiper2.swiper.update();
}
});
thumbs.forEach((thumb)=>{
if (!thumb.dataset.thumbColor.includes(color)){
thumb.classList.add('hidden');
} else {
thumb.addEventListener('click',()=>{
swiper2.swiper.slideTo(thumb.dataset.slideNum);
})
}
});
}
The problem whit this (like you can see in the link below) is that after the first filter, when you click a thumb image it doesn't send you anymore to the correct image.
