gpt4 book ai didi

javascript - 在 Bootstrap 4 模式中打开特定幻灯片

转载 作者:行者123 更新时间:2023-12-03 01:15:28 25 4
gpt4 key购买 nike

我想使用单个 Bootstrap 4 模式来显示 slider 内的不同内容。目前我有 4 个框,应该以模式打开以显示更多信息。如果模式打开,我想在所有框的内容之间滑动。

目前我不知道如何处理模式内的单个幻灯片。我可以打开模式,但它总是会同时显示所有幻灯片。

有什么方法可以打开模式并指向单张幻灯片吗?

例如:单击“Box 2”将打开模式并在 slider 中显示幻灯片 2。

这是我的工作代码示例: https://codepen.io/cray_code/pen/oPxwYq

$('.slider-modal').slick({
dots: false,
arrows: true,
slidesToShow: 1,
});
	<div class="container">
<div class="row">

<div class="col-md-6 col-lg-3">
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">
<h1>Box 1</h1>
<p>Should open Modal and <strong>slide 1</strong></p>
</a>
</div>

<div class="col-md-6 col-lg-3">
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">
<h1>Box 2</h1>
<p>Should open Modal and <strong>slide 2</strong></p>
</a>
</div>

<div class="col-md-6 col-lg-3">
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">
<h1>Box 3</h1>
<p>Should open Modal and <strong>slide 3</strong></p>
</a>
</div>

<div class="col-md-6 col-lg-3">
<a href="#exampleModal" data-toggle="modal" data-target="#exampleModal">
<h1>Box 4</h1>
<p>Should open Modal and <strong>slide 4</strong></p>
</a>
</div>

</div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">

<div class="slider-modal">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>

</div>
</div>
</div>
</div>

最佳答案

尝试使用其他一些额外的数据属性,例如data-innertarget。在模态显示上应用事件

<强> Codepen link

$('#exampleModal').on('show.bs.modal',function(e){
var elem = e.relatedTarget;
$('.slider-modal').find('.slide').hide();
$($(elem).attr('data-innertarget')).show()
})

关于javascript - 在 Bootstrap 4 模式中打开特定幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52035807/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com