我正在從我的網站上的數據庫動態顯示卡片滑塊，該滑塊正在運行。我正在使用以下代碼作為卡片滑塊。$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, 0, 0.4), rgba(0, 0, 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">現在我的問題是，我必須單擊卡片才能在帶有上一個和下一個按鈕的彈出窗口中顯示詳細信息？這是一個例子。截至目前，如果您單擊該Large modal按鈕，它將打開帶有滑塊的彈出窗口。這僅用于測試。單擊我的卡片后，我必須顯示彈出窗口。
1 回答
溫溫醬
TA貢獻1752條經驗 獲得超4個贊
單擊圖像時，您可以獲得包含該圖像的 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>
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消