Question

我有一张桌子，里面有一个打开模态窗口的按钮，在模态内有一个Swiper滑块，显示一些文字/幻灯片

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

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

以下是我的代码

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

    });

这应该可以胜任。 !!

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

1 个答案: