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

Question

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

目前我不确定如何处理模态框内的单张幻灯片。我可以打开模式，但它总是会同时显示所有幻灯片。

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

例如：单击 "Box 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 模式中打开特定幻灯片

Open specific slide in Bootstrap 4 modal

javascript

jquery

twitter-bootstrap

bootstrap-modal

slick.js