자바스크립트(Javascript) 제이쿼리(JQuery) 로 슬라이드 기능 만들어보기

우선 실행 영상,
사진들은 그냥 쇼핑몰에서 가져와서 괜찮을라나 모르겠다,,

전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만
#left는 왼쪽 개발바닥모양이고
#right는 오른쪽 개발바닥모양
width가 총 1200px이라서 오른쪽이나 왼쪽으로 1200씩 더해주고 빼주는 식으로 구현.


var curPosition=1;
$(document).ready(function(){
  $('#left').click(function(){
    if(curPosition == 1){
    fnMove(4);
  }else if(curPosition == 2){
    fnMove(1);
  }else if(curPosition == 3){
    fnMove(2);
  }else if(curPosition == 4){
    fnMove(3);
  }
  });
  $('#right').click(function(){
    if(curPosition == 1){
    fnMove(2);
  }else if(curPosition == 2){
    fnMove(3);
  }else if(curPosition == 3){
    fnMove(4);
  }else if(curPosition == 4){
    fnMove(1);
  }
  });
});

function fnMove(seq){
  if(seq==1){
    position = 0;
    $('#btn_move1').css('background','#6f6f6f');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 1;
  }else if(seq==2){
    position = 1205;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#6f6f6f');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 2;
  }else if(seq==3){
    position = 2411;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#6f6f6f');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 3;
  }else if(seq==4){
    position = 3616;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#6f6f6f');
    curPosition = 4;
  }
   $('#best_pro_div').animate({scrollLeft : position}, 400);
}