在模式中设置活动幻灯片单击 Swiper 滑块

Question

我有一个表格，其中有一个按钮，可以打开一个模态窗口，在模态窗口内有一个 Swiper 滑块，显示一些文本/幻灯片

我需要做的是当有人点击一个按钮时，在模式上它应该自动在 Swiper 上加载相关的幻灯片。

例如，当我单击 SET 1 时，它应该显示幻灯片 1，当我单击 SET 2 时，它应该加载第二个滑块并选择正确的分页。

下面是我的代码

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });
    

HTML

<table>
<tr>
  <td>Set 1</td>
  <td><a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 2</td>
  <td><a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 3</td>
  <td><a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 4</td>
  <td><a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
</tr>
</table>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
         
        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
           
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
</div>
        </div>
        
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

小提琴 https://jsfiddle.net/livewirerules/fu8mezk3/7/

任何帮助将不胜感激

Answer 1

HTML：

<table>
<tr>
  <td>Set 1</td>
  <td><a data-toggle="modal" href="#myModal" data-slider="0" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 2</td>
  <td><a data-toggle="modal" href="#myModal" data-slider="1" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 3</td>
  <td><a data-toggle="modal" href="#myModal" data-slider="2" class="btn btn-primary btn-lg">View</a></td>
</tr>
<tr>
  <td>Set 4</td>
  <td><a data-toggle="modal" href="#myModal" data-slider="3" class="btn btn-primary btn-lg">View</a></td>
</tr>
</table>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content panel-warning">
        <div class="modal-header panel-heading">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">

        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
</div>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

JS：

$( document ).ready(function() {
 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });


    $('#myModal').on('shown.bs.modal', function(e) {
     swiper.update();
    var $invoker = $(e.relatedTarget);
      swiper.slideTo($invoker.data('slider'));
      swiper.update();
    });

    });

这应该可以完成工作。 ！！