Question

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

目前，我不确定如何在模态内查找单个幻灯片。我可以打开模式，但它总是会一次显示所有幻灯片。

有什么方法可以打开模式AND点并指向一张幻灯片吗？

例如：单击“框2”打开模态并在滑块中显示幻灯片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()
})

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

1 个答案: