Issue 1: The filter applied by the .active class does not remove grayscale effect
After clicking on the image, the .active class is added, which implements an intense filter that resembles a photo negative rather than removing the grayscale effect:
.active {
filter: contrast(1000%)
/* black to white */
invert(100%)
/* white to off-white */
sepia(100%)
/* off-white to yellow */
saturate(10000%)
/* do whatever you want with yellow */
hue-rotate(90deg);
}
To fix this, the CSS should either be:
filter: grayscale(0);
OR to completely eliminate all filters:
filter: none;
Issue 2: All thumbnails are marked as .active
While the .active class dynamically affects the .thumbnail-image elements, it's also statically assigned to all thumbnail images (the img child element). This causes all images to appear in the "active" state continuously. The static class needs to be removed:
<!-- <img :src="image.thumb" class="active"/> --> <!-- DON'T DO THIS -->
<img :src="image.thumb">
Alternatively, you can transfer the dynamic application of classes from the container div to the img itself.
Issue 3: The .active class doesn't target the img directly
Although the .active class is assigned to .thumbnail-image (the container for img), the intention is to apply the filter to the actual img element. To achieve this, modify the CSS selector like so:
.active > img {
...
}
If you followed the suggestion to move the dynamic class assignment to the img itself, there’s no need to adjust the selector here.
Demonstration of the Solution
Vue.component("carousel", {
template: ` <!-- Template content here -->
`,
computed: {
// Computed properties
},
data() {
return {
activeImage: 0
};
},
methods: {
// Methods implementation
},
props: ["images"]
});
new Vue({
el: "#app",
data: () => ({
images: [
// Image data objects
]
})
});
.section {
/* Section styles */
}
/* Other CSS rules */
.active > img {
Filter properties
}
#textespan {
Text span styles
}
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7701021237455942594640">[email protected]</a>"></script>
<section class="section" id="app">
<carousel :starting-image="0"
:show-progress-bar="true"
:images="images"></carousel>
</section>