我正在尝试集成一个html模板。它有一个滑块。每张幻灯片包含6幅图像。单击图像会打开一个模式，其中包含图像的详细信息。目前，我用一页自定义帖子来实现这一点，其中包含6个用于上传图像的元盒。说到模态，我就卡住了。有没有更好的方法
<section id="products" >
<div class="container">
<div class="section-title">
<div class="sticker">
<div class="icon">
<i class="fa fa-archive"></i>
</div>
<h1>products</h1>
</div>
<div class="excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend odio nunc, ac commodo augue sollicitudin vitae. Donec quam risus, fermentum in luctus at, sodales eget mauris.
</div>
</div>
</div>
<div id="products-grid" class="row">
<div class="container products-holder">
<div class="row products-holder-item">
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row products-holder-item">
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row products-holder-item">
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-item">
<a href="#myModal" id="openBtn" data-toggle="modal" >
<div class="product-image">
<img src="images/news-img.jpg" alt="">
</div>
<div class="product-desc">
<div class="product-title">
<h4>Lorem Ipsum</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
