title: Set active slide in modal click on Swiper slider
body: <p>Im having a table where it has a a button which opens up a modal window and inside the modal there is a <a href="http://idangero.us/swiper/" rel="nofollow noreferrer">Swiper</a> slider which shows some text/slide</p>
  <p>What i need to do is when someone clicks on a button, on the modal it should automatically load the relevant slide on Swiper.</p>
  <p>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.</p>
  <p>Below is my code</p>
  <p>JS</p>
  <pre><code>var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          spaceBetween: 30,
      });
      
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;Set 1&lt;/td&gt;
    &lt;td&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;View&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Set 2&lt;/td&gt;
    &lt;td&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;View&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Set 3&lt;/td&gt;
    &lt;td&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;View&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Set 4&lt;/td&gt;
    &lt;td&gt;&lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;View&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
    &lt;!-- Modal --&gt;
    &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content panel-warning&quot;&gt;
          &lt;div class=&quot;modal-header panel-heading&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class=&quot;modal-title&quot;&gt;Modal title&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
           
          &lt;div class=&quot;swiper-container&quot;&gt;
          &lt;div class=&quot;swiper-wrapper&quot;&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
              &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
             
          &lt;/div&gt;
          &lt;!-- Add Pagination --&gt;
          &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
          &lt;/div&gt;
          
        &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
    &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  <p>Fiddle
  <a href="https://jsfiddle.net/livewirerules/fu8mezk3/7/" rel="nofollow noreferrer">https://jsfiddle.net/livewirerules/fu8mezk3/7/</a></p>
  <p>Any help will be appreciated</p>