• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 캐러셀 다음, 이전버튼 관련 질문드립니다!

캐러셀 다음, 이전버튼 관련 질문드립니다!

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #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 안으로 항상 유지되게
    호환성 좋고 오류나지 않도록 코드 짜주시면 감사하겠습니다. 
    아무리해도 제 머리론 안되네요.....
    
    
    #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 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠