在 Swiper 滑块上单击模态设置活动幻灯片

Question

我有一个 table，其中有一个按钮可以打开模式 window，在模式内部有一个 Swiper 滑块显示一些 text/slide

我需要做的是当有人点击一个按钮时，在模式上它应该自动加载 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 -->

Fiddle 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();
    });

    });

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

在 Swiper 滑块上单击模态设置活动幻灯片

Set active slide in modal click on Swiper slider

javascript

jquery

twitter-bootstrap

swiper