javascript - How to load data on swipe in iDangerous Swiper? -

i using idangerous swiper mobile slider. fine, don't know how load data in slider when user swipe particular slider div. in short want load data on swipe.

please check snippet.

another problem want load data on click of link, in case "slide 3". want retrieve id of post using data-post , want load ajax data in current slider div.

so need on click of link slide particular slider , load data using link attributions. after if user swipe slide want load other data in slide.

i know confusing , sorry english. :(

thank you

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.3.1/js/swiper.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-- swiper -->      <div class="swiper-container">          <div>      <a href="#" id="btn" data-slider="3" data-post="234"> slide 3</a>      </div>          <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 class="swiper-slide">slide 5</div>              <div class="swiper-slide">slide 6</div>              <div class="swiper-slide">slide 7</div>              <div class="swiper-slide">slide 8</div>              <div class="swiper-slide">slide 9</div>              <div class="swiper-slide">slide 10</div>          </div>          <!-- add pagination -->                    <div class="swiper-pagination"></div>        </div>