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

Question

我想使用单个 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>

Answer 1

尝试使用其他一些额外的数据属性，例如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()
})