swiperjs 원하는 위치로 이동

html

<div class="reivew_photo">
  <h3>포토 상품평</h3>
  <div id="photo_rolling">	
    <div class="swiper-container swiper3">
      <div class="swiper-wrapper">
        <? 
          $thumbnail_width = 145;
          $useSql = sql_query("SELECT * FROM g5_shop_item_use WHERE it_id = '{$it_id}' ");

          //echo "SELECT * FROM g5_shop_item_use WHERE it_id = '{$it_id}' ";

          for($n=0; $useRow = sql_fetch_array($useSql); $n++){
          $matches = get_editor_image($useRow['is_content'], false);
          //print_r($matches[1][0]);
        ?>
          <div class="swiper-slide" it_id="<? echo $useRow['it_id']; ?>" num="<? echo $n+1; ?>"> 
          <img src="<? echo $matches[1][0]; ?>" width="145" height="100">
          </div>
        <? } ?>
      </div>
    </div>
    <? if($useCnt['cnt'] >= 8){ ?>
      <img src="<? echo G5_THEME_URL; ?>/skin/shop/basic/img/review_photo_left.jpg" class="swiper-prev" style="position: absolute;top: 0;right: 18px;z-index: 9999999999999;">
      <img src="<? echo G5_THEME_URL; ?>/skin/shop/basic/img/review_photo_right.jpg" class="swiper-next" style="position: absolute;top: 0;right: 0;z-index: 9999999999999;">
    <? } ?>
  </div><!--photo rolling end-->

js

g5_theme_url = "<? echo G5_THEME_URL; ?>";
  $(".swiper-slide").on("click", function(){
    data = $(this).attr("data-swiper-slide-index");
    num = data-1;
    swiper.slideTo(num, 0);

    it_id = $(this).attr("it_id");
    num = $(this).attr("num");

    $.get(g5_theme_url+"/skin/shop/basic/itemuse_ajax.php?it_id="+it_id+"&num="+num, function(data){
    $("#view_slider").css("transform", "translate3d(-1860px, 0px, 0px)");
    $("#photo_view").html(data);
  });
});

//itemuse_ajax.php
<script>
$(function(){

    var swiper = new Swiper('.swiper4', {
        observer: true,
        observeParents: true,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
        progress: function() {
            num = "<? echo $num; ?>";
            pos = num*930;
            innerTranslate = "-"+pos;
            document.getElementById("view_slider").style.transform =
                "translate3d(" + innerTranslate + "px, 0, 0)";    
            }
        },
    });

});
</script>

 

만약에 이동할때 깜빡깜빡임이 있다면 fadeIn을 사용하면 됩니다.