我在 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 个滑块。
您需要确保在复制代码块时保持所有 ID 的唯一性。复制它们是导致问题的原因。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句