본문 바로가기

JS

코드 3줄로 캐러셀 (이미지 슬라이드) 만들기2

오늘은 저번시간에 만든 버튼에서 다음 이전 버튼을 만들려고 한다.

 

처음에 1번 페이지를 누를때 특정 변수를 할당해서 

if 문으로 그 페이지를 읽고 vw 값을 조절하려 했는데 

지역변수를 할당해 전역변수로 사용하려는 부분에서 안된것 같았다

 

그래서 처음 변수를 만들고 함수 내에서만 사용하는 식으로 구현했다

        var nowpage = 1
        $('.next').on('click',function(){
          if (nowpage == 1){
            $('.slide-container').css('transform','translateX(-100vw)')
            nowpage += 1
             } else if (nowpage == 2){
            $('.slide-container').css('transform','translateX(-200vw)')  
            nowpage += 1
             }

 

처음 1페이지에서 시작해 하나씩 현재페이지에 1을 더해 다음 페이지임을 표시하는 방식이다.

하지만 전에 만든 1,2,3 버튼을 사용하면 현재 위치가 계속 바뀌기 때문에 정상 작동을 하지 않는다.