Set active slide in modal click on Swiper slider

Question

Im having a table where it has a a button which opens up a modal window and inside the modal there is a Swiper slider which shows some text/slide

What i need to do is when someone clicks on a button, on the modal it should automatically load the relevant slide on Swiper.

For an example, When i click on SET 1 It should show slide 1, and when i click on SET 2it should load the second slider with the proper pagination selected.

Below is my code

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/

Any help will be appreciated

Riaz Laskar Riaz Laskar · Accepted Answer · 2017-06-15T18:50:33

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

    });

this should do the job. !!

Set active slide in modal click on Swiper slider

1 Answers