Modal - Danger

by Nick Hulea

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
  <tr>
    <td>Set 1</td>
    <td><a data-toggle="modal" data-index="0" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
  </tr>
  <tr>
    <td>Set 2</td>
    <td><a data-toggle="modal" data-index="1" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
  </tr>
  <tr>
    <td>Set 3</td>
    <td><a data-toggle="modal" data-index="2" href="#myModal" class="btn btn-primary btn-lg">View</a></td>
  </tr>
  <tr>
    <td>Set 4</td>
    <td><a data-toggle="modal" data-index="3" 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 -->

CSS

.panel-heading {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.swiper-container {
  min-height: 200px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      spaceBetween: 30,
      noSwiping: true,
      draggable: false,
      simulateTouch: false,
      speed: 0
    });

    console.log(swiper)
    $('#myModal').on('shown.bs.modal', function(e) {
      var $invoker = $(e.relatedTarget);
      console.log($invoker[0].attributes[1].value)
      console.log(swiper)
      swiper.slideTo($invoker[0].attributes[1].value, 0, false);
      swiper.update();
    });