Открыть конкретный слайд в Bootstrap 4 модальный - PullRequest
Новая
       12

Открыть конкретный слайд в Bootstrap 4 модальный

0 голосов
/ 27 августа 2018

Я хочу использовать один модал Bootstrap 4, чтобы показывать различный контент внутри слайдера.На данный момент у меня есть 4 коробки, которые должны открываться в модальном режиме, чтобы показать больше информации.Если модальный режим открыт, я хочу перемещаться между содержимым всех блоков.

В настоящее время я не уверен, как выделить один слайд внутри модального окна.Я мог бы открыть модальный, но он всегда будет показывать все слайды одновременно.

Есть ли способ открыть модальное И указать на один слайд?

Например: Нажмите на «Вставку 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>

1 Ответ

0 голосов
/ 27 августа 2018

Попробуйте использовать другой дополнительный атрибут данных, такой как 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()
})
...