2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 2월 1일 23:54 #66440
잘먹고잘살래요참가자군인이라 연등시간이 정해져있어서 몇일간 매일 조금씩 계속 이전, 다음버튼 어떻게 하면 오류없이 잘 돌아갈까 하고 계속 고민하고 코드 짜보고 했는데 그나마 이제 성공시킨건 직접 if else if 문으로 하드코딩해서 돌아가게 만든것입니다. 아무리 생각해도 어떻게 호환성 좋게 만들수 있는지 답이 안 나옵니다 좀 도와주세요 ㅠㅠ
var 지금사진 = 1; $('.slide-1').on('click', function() { 지금사진 = 1; $('.slide-container').css('transform', 'translateX(0vw)'); }); $('.slide-2').on('click', function() { 지금사진 = 2; $('.slide-container').css('transform', 'translateX(-100vw)'); }); $('.slide-3').on('click', function() { 지금사진 = 3; $('.slide-container').css('transform', 'translateX(-200vw)'); }); $('.next').on('click', function(){ if(지금사진 == 3) { $('.slide-container').css('transform', 'translateX(-200vw)'); } else if(지금사진 == 2) { $('.slide-container').css('transform', 'translateX(-200vw)'); 지금사진 ++;} else if(지금사진 = 1){ $('.slide-container').css('transform', 'translateX(-100vw)'); 지금사진 ++;} });
$('.prev').on('click', function(){ if(지금사진 == 3) { $('.slide-container').css('transform', 'translateX(-100vw)'); 지금사진 --; } else if(지금사진 == 2) { $('.slide-container').css('transform', 'translateX(0vw)'); 지금사진 --; } else if(지금사진 == 1){ $('.slide-container').css('transform', 'translateX(0vw)'); } }); 위 코드가 호환성 좋지 않지만 일일이 다 하드코딩한것입니다. 호환성 좋게 만드려다가 2번버튼 누르고 이전 버튼 누르면 안넘어가고 한번 더 눌러야 1번 슬라이드로 바뀌고 1번버튼 누르고 다음버튼 누르면 갑자기 3번 슬라이드로 넘어가고 그랬습니다. 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2에서 <button class="next">다음</button> <script> var 지금사진 = 1; $('.next').on('click', function(){ $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)'); 지금사진 += 1; }) </script> 이렇게 호환성 좋게 코드 짜주셨던것처럼 이전, 다음 버튼 눌러도 0vw ~ -200vw 범위 넘어가지 않게 지금사진 값 범위 1~3 안으로 항상 유지되게 호환성 좋고 오류나지 않도록 코드 짜주시면 감사하겠습니다. 아무리해도 제 머리론 안되네요.....
2023년 2월 2일 09:48 #66454
codingapple키 마스터규칙이없어서 별로 축약의 여지는 없어보입니다 else if(지금사진 == 2) { $('.slide-container').css('transform', 'translateX(-200vw)'); 지금사진 ++; } else if(지금사진 = 1){ $('.slide-container').css('transform', 'translateX(-100vw)'); 지금사진 ++;} } 이런거 2개는 (지금사진-1)00vw 만큼 이동하라고 줄일 수는 있을듯요
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.