网页Flickity轮播图图片不显示及数字标识去除问题求助

Hey there! Let’s work through your Flickity carousel issues step by step—both are straightforward fixes once we identify the root causes:

1. Removing the Slide Number Labels (1, 2, 3) #

Those numbers are generated by a CSS pseudo-element you’ve added. Take a look at this rule in your styles:

/* cell number */
.gallery-cell:before { 
  display: block; 
  text-align: center; 
  content: counter(gallery-cell); 
  line-height: 200px; 
  font-size: 80px; 
  color: white; 
}

The content: counter(gallery-cell); line is what inserts the sequential numbers. To get rid of them, you have two simple options:

• Option 1: Delete the entire .gallery-cell:before rule from your CSS.
• Option 2: Keep the rule but empty the content: change content: counter(gallery-cell); to content: "";.

2. Fixing Images Not Displaying #

There are a few likely issues here, plus a small HTML mistake to address first:

First: Fix the Unclosed HTML Tag #

Your second .gallery-cell div isn’t closed properly, which can mess up the DOM structure and break Flickity’s rendering. Add the missing </div> after the Paris slide’s inner content:

<div class="gallery-cell">
  <img src="img/paris.jpg" alt="Second slide">
  <div class="col-md-12 text-center">
    <h2>
      <span>Paris</span>
    </h2>
  </div>
</div> <!-- Add this closing tag -->

Second: Verify Image Paths #

Double-check that your image paths are correct. If your HTML file is in your project’s root folder, img/ny.jpg assumes there’s an img folder at the same level as the HTML file. If your HTML lives in a subfolder (like pages/index.html), adjust the path to ../img/ny.jpg to navigate up one directory.

You can test with an absolute path (e.g., /img/ny.jpg) to quickly confirm if the path is the problem.

Third: Stop the Pseudo-element from Covering Images #

The .gallery-cell:before pseudo-element takes up the full height of the cell and may be sitting on top of your images, hiding them. Fix this by giving your images a higher z-index:

.gallery-cell img {
  position: relative;
  z-index: 1; /* Ensures images sit above the pseudo-element */
  width: 100%; /* Make images fill the cell width */
  height: 100%; /* Fill the cell height */
  object-fit: cover; /* Prevent image stretching or distortion */
}

Putting all these fixes together should resolve both your image display and number label issues. Give them a try!

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