Mobile Swiper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-slider="1"></div>
            <div class="swiper-slide" data-slider="2"></div>
            <div class="swiper-slide" id="slide3" data-slider="3" data-id="458"></div>
            <div class="swiper-slide" data-slider="4"></div>
            <div class="swiper-slide" data-slider="5"></div>
            <div class="swiper-slide" data-slider="6"></div>
            <div class="swiper-slide" data-slider="7"></div>
            <div class="swiper-slide" data-slider="8"></div>
            <div class="swiper-slide" data-slider="9"></div>
            <div class="swiper-slide" data-slider="10"></div>
        </div>
        <!-- Add Pagination -->
        
        <div class="swiper-pagination"></div>

    </div>
    
     <div class="list">
    <ul>
        <li><a href="#" class="recnt" data-slider="1" data-pid="456">TITLE ONE</a></li>
        <li><a href="#" class="recnt" data-slider="2" data-pid="456">TITLE TWO</a></li>
        <li><a href="#" class="recnt" data-slider="3" data-pid="456">TITLE THREE</a></li>
        <li><a href="#" class="recnt" data-slider="4" data-pid="456">TITLE FOUR</a></li>
        <li><a href="#" class="recnt" data-slider="5" data-pid="456">TITLE FIVE</a></li>
    </ul>
    </div>

CSS

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 {
        float:left;
        width: 50%;
        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;
    }
    
    .list{
      float:right;
      padding:20px;
    }

JavaScript

$(document).ready(function(){
   var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          slideToClickedSlide:true,
          loop: true,
          preloadImages: false,
          lazyLoading: true,
          watchSlidesVisibility: true
          });
      	                  function isEmpty( el ){
      		return !$.trim(el.html())
  			};  
          swiper.on('onTransitionStart', function () {
           var slider = $(".swiper-slide-active").data("slider");

           	if(isEmpty($('.swiper-slide-active'))) {
  					$('.swiper-slide-active').prepend(slider); }
          });

      $('.recnt').one('click', function(){
      	var slider = $(this).data("slider");
        var pid = $(this).data("pid");
  			swiper.slideTo(slider, 1000, myfunction(slider,pid));
  		});
  
  function myfunction(slider,pid){
  alert(slider);
  var i = 0;
  for(i=0; i<1; i++) {
    alert(slider);
  	$('#slide3').prepend("asd");
    }
  };
  });