title: How to load data on swipe in iDangerous Swiper?
body: <p>I am using iDangerous Swiper for mobile slider. everything is fine, But I don't know how to load data in slider when user swipe to particular slider div. In short I want to load data on swipe.</p>
  
  <p>Please check the snippet. </p>
  
  <p>Another problem is I also want to load data On click of link, in this case "<strong>Slide to 3</strong>". I want to retrieve the ID of post using <code>data-post</code> and then I want to load some Ajax data in the current slider div.</p>
  
  <p>So basically what I need i on click of link slide to particular slider and then load data using link attributions. After that if user swipe to another slide then I want to load other data in that slide.</p>
  
  <p>I know its confusing and really sorry for English. :(</p>
  
  <p>Thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          slideToClickedSlide:true,
          loop: true,
          preloadImages: false,
          lazyLoading: true
      });
      
      $('#btn').click(function(){
      var slider = $(this).data("slider");
  swiper.slideTo(slider, 1000, false);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
          position: relative;
          height: 100%;
      }
      body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
      }
      .swiper-container {
          width: 100%;
          height: 100%;
      }
      .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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Swiper --&gt;
      &lt;div class="swiper-container"&gt;
          &lt;div&gt;
      &lt;a href="#" id="btn" data-slider="3" data-post="234"&gt; Slide to 3&lt;/a&gt;
      &lt;/div&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 5&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 6&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 7&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 8&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 9&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;Slide 10&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Add Pagination --&gt;
          
          &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>