I have implemented the Glide JS carousel within a VueJS project to showcase multiple images, however, I am encountering an issue where only the first image is being displayed. The <img/> tag has the correct src URL for all three images, but only the initial one is showing up. I have spent hours debugging this problem without any success in identifying the cause of this bug.
import Glide from "@glidejs/glide";
import FeatherIcon from "vue-feather";
import "./_style.scss";
export default {
name: "DashboardCarousel",
props: {
imageSources: Array
},
mounted() {
new Glide(".glide").mount();
},
render(h) {
return (
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
{this.imageSources.map((source, key) => (
<li
key={key}
class="glide__slide glide__frame glide__image-area"
class={`glide__slide slide-${key} glide__image-area`}
>
<img
onClick={() => window.open(source.link)}
src={source.path}
style={{ width: "100%", cursor: "default" }}
/>
</li>
))}
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<FeatherIcon
type="chevron-left"
size={48}
style={{ opacity: 0.5 }}
/>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<FeatherIcon
type="chevron-right"
size={48}
style={{ opacity: 0.5 }}
/>
</button>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
{this.imageSources.map((source, index) => (
<button class="glide__bullet" data-glide-dir=`=${index}`></button>
))}
</div>
</div>
);
}
};