VueJS项目中Glide JS轮播仅显示首张图片问题求助

Hey there, let's walk through the issues in your code that are likely causing only the first slide to show up, even though your image URLs are correct. Here's what to check and fix:

1. Duplicate class Attributes in JSX Are Overriding Styles #

Look at your <li> element in the render function:

<li key={key} class="glide__slide glide__frame glide__image-area" class={`glide__slide slide-${key} glide__image-area`} >

In JSX, duplicate attributes get overwritten—your second class definition replaces the first. This means Glide might be missing critical styles for the slides, making them invisible. Combine the classes into a single attribute instead:

<li key={key} class={`glide__slide glide__frame glide__image-area slide-${key}`}>

2. Glide Initialization Timing Might Be Off #

You're initializing Glide in mounted, but if your imageSources are loaded asynchronously (like from an API), the DOM won't have all the slides ready when mounted runs. Instead, watch for changes to imageSources and initialize Glide after the DOM updates:

data() {
  return {
    glideInstance: null
  };
},
watch: {
  imageSources: {
    handler() {
      // Clean up existing instance first to avoid duplicates
      if (this.glideInstance) {
        this.glideInstance.destroy();
      }
      // Wait for Vue to update the DOM before initializing Glide
      this.$nextTick(() => {
        this.glideInstance = new Glide(".glide").mount();
      });
    },
    immediate: true // Run on component mount too
  }
},
beforeUnmount() {
  // Destroy the instance when the component unmounts to prevent memory leaks
  if (this.glideInstance) {
    this.glideInstance.destroy();
  }
}

This ensures Glide always sees all your slides, even if the data loads after the component mounts.

3. Add Basic Glide Configuration (Optional but Recommended) #

Glide's default settings might not match your use case. Adding explicit config can help ensure the carousel behaves as expected:

this.glideInstance = new Glide(".glide", {
  type: "carousel", // Ensures continuous looping
  perView: 1, // Show one slide at a time
  gap: 0 // Adjust gap between slides as needed
}).mount();

4. Verify Image Loading (Just to Be Sure) #

Even if you think the URLs are correct, add error handling to confirm images are loading properly:

<img 
  onClick={() => window.open(source.link)} 
  src={source.path} 
  alt={`Carousel slide ${key}`}
  onError={(e) => console.error("Failed to load image:", e.target.src)}
  style={{ width: "100%", cursor: "pointer" }} 
/>

Also, double-check local image paths—if you're using assets from your src folder, you might need to use require(source.path) instead of just source.path.

5. Confirm Glide Styles Are Loaded #

Make sure your _style.scss includes Glide's core and theme styles:

@import "@glidejs/glide/dist/css/glide.core.min.css";
@import "@glidejs/glide/dist/css/glide.theme.min.css";

Missing these styles can break slide layout and visibility entirely.

Work through these fixes one by one, and your carousel should start displaying all images correctly!

内容的提问来源于stack exchange，提问作者Gabriel Silva