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

home2 게시판 JavaScript, TS 게시판 캐러셀 응용 과제중에 버튼 만들기

캐러셀 응용 과제중에 버튼 만들기

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #111764

    손아현
    참가자
    안녕하세요 선생님 캐러셀 prev 버튼 만드는데 어려움이 있어 질문 드립니다
    
      <button class="prev">이전</button>
      <button class="slide-1">1</button>
      <button class="slide-2">2</button>
      <button class="slide-3">3</button>
      <button class="next">다음</button>
    
    --------------------------------------------------------------------------------------- HTML
    
    
        document.querySelector('.slide-1').addEventListener('click', function () {
          document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
        })
        document.querySelector('.slide-2').addEventListener('click', function () {
          document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
        })
        document.querySelector('.slide-3').addEventListener('click', function () {
          document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
        })
    --------------------------------------------------------------------------------------- 자바스크립트 1,2,3 버튼
    var 지금사진 = 1;
    function nextBtn() {
      if (지금사진 < 3) {
        document.querySelector('.slide-container').style.transform = 'translateX(-' + (지금사진 * 100) + 'vw)';
        지금사진 += 1;
      }
    }
    document.querySelector('.next').addEventListener('click', nextBtn);
    
    
    function prevBtn() {
      if (지금사진 > 1) {
        document.querySelector('.slide-container').style.transform = 'translateX(-' + ((지금사진 - 1) * 100) + 'vw)';
        지금사진 -= 1;
      }
    }
    document.querySelector('.prev').addEventListener('click', prevBtn);
    
    
    --------------------------------------------------------------------------------------- 자바스크립트 next, prev 버튼
    
    
    일단 1,2,3 버튼은 비교적 잘 작동하고 있습니다
    그런데 이전 버튼은 전혀 먹히지 않고 다음버튼 또한 2번에서 바로 넘어가지 않는다던지 하는 문제가 있습니다
    다음버튼과 같은 방식으로 이전버튼도 코드를 짜봤는데 어떤 부분이 잘못되었는지 알려주시면 감사하겠습니다!
    #111774

    codingapple
    키 마스터
    이전버튼 누르면 지금사진 변수가 3일 때는 -100vw로 이동해야할거같은데 -200vw로 이동하는듯요
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 호 / 개인정보관리자 : 박종흠