html - 不能使用 HTML 重复相同的部分，只显示一个代码块而忽略另一个

Question

我在 HTML 页面中有一个包含图像滑块的部分，我想重复它，但第二个从未出现。这是原始代码

  <!-- Featured Listings Start -->
    <section class="featured-lis">
        <div class="container">
            <div class="row">
                <div class="col-md-12 wow fadeIn" data-wow-delay="0.5s">
                    <h3 class="section-title">Featured Listings</h3>
                    <div id="new-products" class="owl-carousel">
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img1.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$150</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img2.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$67</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img3.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Feugiat nulla facilisis</a>
                                <span class="price">$300</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img4.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$149</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img5.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$90</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img6.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Praesent luptatum zzril</a>
                                <span class="price">$169</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img7.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Lorem ipsum dolor sit</a>
                                <span class="price">$79</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="product-item">
                                <div class="carousel-thumb">
                                    <img src="{% static './assets/img/product/img8.jpg' %}" alt="">
                                    <div class="overlay">
                                        <a href="ads-details.html"><i class="fa fa-link"></i></a>
                                    </div>
                                </div>
                                <a href="ads-details.html" class="item-name">Sed diam nonummy</a>
                                <span class="price">$149</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Featured Listings End -->

我所做的只是再次重复整个代码块，在页面中有 2 个滑块……但它没有显示第二个。将其保留在代码中显示效果很好，仅显示 1 个单个滑块。只有当我再次重复代码以获得 2 个代码块时，才会出现问题。仅出现 1 个滑块。

标签： html

Answer 1

您需要确保在复制代码块时保持所有 ID 的唯一性。复制它们是导致问题的原因。