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

home2 게시판 JavaScript, TS 게시판 코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2

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

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

    Hyejin
    참가자
    안녕하세요 선생님
    바보같은 질문인것 같아 조금 부끄럽지만 질문 드려봅니다.
    답변 부탁드립니다. 
    
    코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2 강의를 듣다가 잘 안되는 부분이 있어서 질문 드립니다.
    응용 2번에서 if문 없이 코드 짜는 부분을 해보고 있는데요
    
    다음 버튼은 선생님께서 코드 올려주신대로 따라해봤는데 이전 버튼은 어떻게 만들어야하는지 도저히 모르겠습니다.
    
    그리고 버튼 누를때마다 지금사진 변수의 값을 콘솔에 계속 찍어보고 있는데,
    지금사진의 변수를 차례대로 사진 번호로 고정하는 방법은 없을까요?
    
    지금사진의 값이 현재 있는 사진 슬라이드의 수를 넘어가면 더이상 슬라이드가 움직이지 않게 만들려면 어떻게 코드를 짜야할까요?
    if문을 사용하면 될 것같은데 어떻게 코드를 짜야할지 잘 모르겠습니다. 
    
    마지막으로 가능하다면 잘 동작하는 전체 코드를 보여주셨으면 좋겠습니다.
    제 코드와 어느 부분이 다른지 비교해보고 싶습니다.
    
    감사합니다.
    
    
    
    HTML -------------------------------------------------------------------------
    <div style="overflow: hidden;">
          <div class="slide-container">
            <div class="slide-box">
              < img src="./img/car1.png">
            </div>
            <div class="slide-box">
              < img src="./img/car2.png">
            </div>
            <div class="slide-box">
              < img src="./img/car3.png">
            </div>
          </div>
        </div>
        <button class="slide-1">1</button>
        <button class="slide-2">2</button>
        <button class="slide-3">3</button>
        <button class="prev">이전</button>
        <button class="next">다음</button>
    
    
    
    JS  -------------------------------------------------------------------------
    
    var 지금사진 = 1;
          
          // 다음 버튼
          document.querySelector('.next').addEventListener('click', function(){
            document.querySelector('.slide-container').style.transform = 'translateX(-' + 지금사진 + '00vw)';
            지금사진 += 1;
            console.log(지금사진);
          });
          // 이전 버튼
          document.querySelector('.prev').addEventListener('click', function(){
            document.querySelector('.slide-container').style.transform = 'translateX(-' + 지금사진 + '00vw)';
            지금사진 -= 1;
            console.log(지금사진);
          });
          // 1, 2, 3 버튼
          document.querySelector('.slide-1').addEventListener('click', function(){
            document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
            지금사진 = 1;
            console.log(지금사진);
          });
          document.querySelector('.slide-2').addEventListener('click', function(){
            document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
            지금사진 += 1;
            console.log(지금사진);
          });
          document.querySelector('.slide-3').addEventListener('click', function(){
            document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
            지금사진 += 1;
            console.log(지금사진);
          });
    
    
    #119995

    codingapple
    키 마스터
    변수에 뭔가 값을 저장하려면 등호로 직접 할당해야합니다 
    이전버튼 누르면 지금사진이 3일경우 -100vw로 움직이고 지금사진이 2일 경우 -0vw로 움직이라고 해봅시다
    다음버튼 누를 때 지금사진이 3이면 이동시키지말라고 if문 쓰면 될듯요
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 호 / 개인정보관리자 : 박종흠