问题描述
我正在从正在运行的网站上的数据库动态显示卡滑块。我将以下代码用于卡滑块。
$data = '<div class="main-carousel planSliders mt-5">';
foreach($plans as $plan){
$tid = $plan->ID;
$data.= '<div class="carousel-cell">
<a href="'.esc_url( get_permalink($tid)).'"><div class="planBg" style="background-image:linear-gradient(rgba(0,0.4),rgba(0,0.4)),url('.get_the_post_thumbnail_url($tid).')">
<div class="planInfo">
<h4>'.$plan->post_title.'</h4>
</div>
</div>
</a> </div>';
}
$data.='</div>';
--------------------------------------
< | card 1 | card 2 | card 3 | card 4 | > many more
| | | | |
--------------------------------------
现在我正在做的是，当用户单击任何卡时，弹出窗口将打开，其中包含各自的详细信息以及上一个和下一个按钮。
对于弹出窗口，我正在使用bootstrap 4模态代码，并添加了bootstrap旋转木马滑块代码，以便可以查看下一张和上一张卡片的详细信息。
我添加了一个名为Test button的按钮以进行测试，以检查是否获得了所有滑块数据的模态。是的，它正在工作。
$data.='<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Test button</button>
<div class="planPopup modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close closePopup" data-dismiss="modal">×</button>
<div id="planopenPopup" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">';
$i=1;
foreach($plans as $plan){
$item_class = ($i == 1) ? 'carousel-item active' : 'carousel-item';
$tid = $plan->ID;
$data.='<div class="'.$item_class.'">
<div class="planPopupWrapper">
<div class="planPopupBG" style="background-image:linear-gradient(rgba(0,url('.get_the_post_thumbnail_url($tid).')">
</div> <div class="planPopupContent"><h4>'.$plan->post_title.'</h4><p>'.$plan->post_content.'</p></div></div></div>';
$i++;
}
$data.='</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#planopenPopup" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#planpenPopup" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</div>';
现在，我的问题是，我必须单击卡以使用上一个和下一个按钮在弹出窗口中显示详细信息？
这是一个示例。到目前为止，如果您单击Large modal按钮，它将打开带有滑块的弹出窗口。这仅用于测试。单击卡后，我必须显示弹出窗口。
* {
Box-sizing: border-Box;
}
body {
font-family: sans-serif;
}
.parentSlider {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4,1fr);
}
.parentSlider-cell img {
width: 100%;
}
.modal-dialog {
max-width: 80%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="parentSlider">
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 1" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 2" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 3" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 4" /></a>
</div>
</div>
<button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placehold.it/1200x600/555/000&text=One" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="Chicago">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="New York">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Four" alt="test">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>您能帮我吗？
解决方法
点击图像后，您可以获得具有该图像的div索引，即0,1..etc，然后使用该索引可以使carousel slide处于同一位置。
演示代码：
//when img is clicked
$('.parentSlider-cell img').click(function() {
//get index for div
var idx = $(this).parents('div').index();
console.log(idx)
var id = parseInt(idx);
$('.bd-example-modal-lg').modal('show'); // show the modal
$(".carousel-inner").carousel(id); // slide carousel to selected
});* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.parentSlider {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4,1fr);
}
.parentSlider-cell img {
width: 100%;
}
.modal-dialog {
max-width: 80%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="parentSlider">
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="http://placehold.it/1200x600/555/000&text=One" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="http://placehold.it/1200x600/555/000&text=two" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Three" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Four" /></a>
</div>
</div>
<button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placehold.it/1200x600/555/000&text=One" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="Chicago">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="New York">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Four" alt="test">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>