swipe

#. HTML

<div id="bodywrap">
    <header>
        <nav>
            <ul>
                <li><a href="#item1">소개</a></li>
                <li><a href="#item2">시설</a></li>
                <li><a href="#item3">식단</a></li>
                <li><a href="#item4">서비스금액</a></li>
                <li><a href="#item5">프로그램</a></li>
                <li><a href="#item6">환불규정</a></li>
                <li><a href="#item7">가이드</a></li>
                <li><a href="#item8">스케쥴</a></li>
            </ul>
        </nav>
    </header>
      <ul class="panes">
        <li>
           
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
</div> 

#. CSS

#bodywrap{background-color: #fff;overflow: hidden;position: relative;height:738px;width:100%;transition:height 1s;transform:translate3d(0,0,0);}
header nav ul{width:100%;height:50px;background-color: #333;position: absolute;top:0;left:0;overflow: hidden;}
header nav ul li{height:100px;line-height: 50px;display: block;font-size: 14px;position: absolute;left:100%;top:0;transition: 0.5s all;transform: translate3d(0, 0, 0);text-align: center;width:110px;}
header nav ul li a{color:#999;display: block;height: 50px;line-height: 50px;overflow: hidden;position: relative;padding: 0 20px;}
header nav ul li a:after{content: ' ';position: absolute;bottom: 0;left: 0;background: cyan;width: 100%;height: 5px;opacity: 0;transition: 0.5s all;transform: translate3d(0, 3px, 0);}
header nav li.cur a{color:white;}
header nav li.cur a:after {opacity: 1;transform: translate3d(0, 0, 0);}
header nav ul li.before{left:0%;}
header nav ul li.prev{left:0%;}
header nav ul li.cur{left:50%;font-weight: bold;}
header nav ul li.next{left:100%;}
header nav ul li.after{left:100%;}
#bodywrap ul.panes {
  position: absolute;
  width: 100%;
  height:100%;
  top:100px;
  cursor: move;
}
#bodywrap ul.panes li {
  position: absolute;
  font-size: 50px;
  text-align: center;
  top: 0;
  left: 100%;
  width: 100%;
  padding: 20px 20px 0 20px;
  transition: 0.5s all;
  transform: translate3d(0, 0, 0);

}
#bodywrap ul.panes li.prev {
  transform: translate3d(-200%, 0, 0);
}
#bodywrap ul.panes li.cur {
  transform: translate3d(-100%, 0, 0);
}
#bodywrap ul.panes li.next {
  transform: translate3d(0, 0, 0);
}
#bodywrap ul.panes li.before {
  transform: translate3d(-200%, 0, 0);
}
#bodywrap ul.panes li.after {
  transform: translate3d(0, 0, 0);
}

3. jQuery

var autoAdjustHeight = true;
 
// update on click
function init(){
  $('#bodywrap nav ul li a').on('click', function(e){
  e.preventDefault(); // a클릭시 #일때 페이지 최상단으로 이동하지 않게함.
  var goTo = $(this).parent().index();  // 클릭한 a의 부모엘리먼트 즉 li의 인덱스값을 가져옴. 0 ~ 7의 값을 가짐.
  swipegoryUpdate(goTo); // 인덱스 값을 가지고 swipegoryUpdate(인덱스값) 를 실행함.
  });
};
 
 
// update on load
$(window).load(function() {
  swipegoryUpdate(0);  
});
 
init();
    // update on touch
    $("ul.panes").swipe({
      swipeStatus: function(event, phase, direction, distance, duration, fingerCount) {
        var translateString = 'translate3d(0px, 0px, 0px)';
        var transitionDuration = $('nav li.cur').css('transitionDuration');
        var speed = transitionDuration;
 
        if (phase == 'move') {
          speed = '0ms';
          if (direction == 'left') {
            translateString = 'translate3d(-' + distance + 'px, 0px, 0px)';
            $('.panes li.cur').css('marginLeft', '-' + distance + 'px');
          } else if (direction == 'right') {
            translateString = 'translate3d(' + distance + 'px, 0px, 0px)';
            $('.panes li.cur').css('marginLeft', distance + 'px');
          }
          $('nav li.cur').css({
            transitionDuration: speed,
            transform: translateString
          });
 
        } else if (phase == 'end') {
          // reset transform3D    
          var marginLeft = $('nav li.cur').css('marginLeft');
          $('nav li.cur').attr('style', '').css('marginLeft', marginLeft);
          $('.panes li.cur').attr('style', '');
        }
      },
      swipeLeft: function(event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes left
        var goTo = $('nav li.cur').index();
        goTo++;
        swipegoryUpdate(goTo);
      },
      swipeRight: function(event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes left
        var goTo = $('nav li.cur').index();
        goTo--;
        swipegoryUpdate(goTo);
      },
      threshold: 10,
      triggerOnTouchEnd: false,
      allowPageScroll: "vertical",
      excludedElements: "button, input, select, textarea, .noSwipe"
    });
 
 
function swipegoryUpdate(goTo) {
  var listItems = $('nav li'); // li 전부의 정보를 변수에 넣음.
  var panes = $('.panes'); // 
  var prev = goTo - 1; // 이전 , -1 ~ 6 까지 
  var next = goTo + 1; // 다음 , 1 ~ 8 까지 
 
  // li.index = 0   -> prev,next(-1, 1)
  // li.index = 1   -> prev,next( 0, 2)
  // li.index = 2   -> prev,next( 1, 3)
  // li.index = 3   -> prev,next( 2, 4)
  // li.index = 4   -> prev,next( 3, 5)
  // li.index = 5   -> prev,next( 4, 6)
  // li.index = 6   -> prev,next( 5, 7)
  // li.index = 7   -> prev,next( 6, 8)
 
 
  
  if(goTo >= 0 &;;&;; goTo < listItems.length) {   
    // 클릭한 a가 첫번째가 아니면 실행.
    // 붙을 수 있는 상태 클래스는 총 5가지. 이전, 현재, 다음, 비포, 애프터 - 이전,다음과 비포,애프터의 차이가 뭐지;;
    // 여튼 nav li에 붙어있는 클래스들 초기화 시켜줌.
    // 본문에 스와이프될 li에도 클래스  초기화 시킴.
    listItems.removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
    $('li', panes).removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
 
    // if문 분기에 따른 각 nav li의 스타일지정.
    listItems.each(function(i) {
      var li = $(this);  // 일단 첫번쨰 nav li를 변수li에 넣음.
      var pane = $('li:eq('+i+')', panes);  // 변수 pane에 첫번째 li를 넣음.
      // li와 pane에 각각 여러개의 li중 첫번째 li가 장전되어 있음.
      
      li.attr('style', ''); // 첫번째 li의 스타일 초기화?
 
      // li의 인덱스값과 동일한 값을 찾아서 스타일 첨부.
      // i = 0 , goto = 0 이므로 prev,next(-1,1)이 된다.
      if(i == prev) {  
        li.addClass('prev');
        li.css('margin-left', '0');      
        pane.addClass('prev');
      }
      else if(i == next) {
        li.addClass('next');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('next');
      }
      else if(i < goTo) {
        li.addClass('before');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('before');
      }
      else if(i == goTo) {  // 처음은 여기 걸림.
        li.addClass('cur'); // 현재 li의 left 값을 50%로주고 해당 li의 outerWidth()값을 /2 해서 margin-left 시키면 가운데 위치함.
        var marginLeft = li.outerWidth() / 2;
        
        li.css('margin-left', '-' + marginLeft + 'px');
        pane.addClass('cur'); // 본문은 left값 -100%줌.
 
        // 내용감싸는 wrap의 높이를 li+pane 의 outerHeight 를 더해서 구하고있음.
        if(autoAdjustHeight == true) {
          $('.swipegory').css('height', pane.outerHeight() + li.outerHeight());
        }
 
      }
      else if(i > goTo) {
        li.addClass('after');
        li.css('margin-left', '0');
        pane.addClass('after');
      }
    });    
  }
}