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

home2 게시판 JavaScript, TS 게시판 캐러셀 스와이프

캐러셀 스와이프

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

    송승환
    참가자
    HTML
    <div class="slid-container">
                    <div class="slid-card">
                        < img src="../img/car1.png" draggable="false">
                    </div>
                    <div class="slid-card">
                        < img src="../img/car2.png" draggable="false">
                    </div>
                    <div class="slid-card">
                        < img src="../img/car3.png" draggable="false">
                </div>
    CSS
    
    .slid-total {
        overflow: hidden;
    }
    .slid-container {
        width: 300vw;
    }
    .slid-card {
        width: 100vw;
        float: left;
    }
    .slid-card img {
        width: 100%;
        
    }
    
    JS
    
    var startpoint = 0;
    var endpoint = 0;
    var startpoint1 = 0;
    var endpoint1 = 0;
    var triggerpoint = 0;
    var triggerpoint1 = 0;
    var clickon = false;
    var clickon1 = false;
     
    document.querySelectorAll('.slid-card')[0].addEventListener('mousedown', function(e){
        startpoint = e.clientX;
        clickon = true
    });
    document.querySelectorAll('.slid-card')[0].addEventListener('mousemove', function(e){    
        endpoint = e.clientX
        if (clickon == true){
            document.querySelector('.slid-container').style.transform = `translateX(${e.clientX - startpoint}px)`
        }
        console.log(e.clientX)
       
    });
    document.querySelectorAll('.slid-card')[0].addEventListener('mouseup', function(e){
        clickon = false
        
        triggerpoint = endpoint - startpoint;
        if (triggerpoint < -400){
            document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }else {
            document.querySelector('.slid-container').style.transform = `translateX(0vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }
        setTimeout(() => {
            document.querySelector('.slid-container').style.transition = 'none';
        }, 500);
            
    });
    //index 1
    document.querySelectorAll('.slid-card')[1].addEventListener('mousedown', function(e){
        startpoint1 = e.clientX;
        clickon = true
    });
    document.querySelectorAll('.slid-card')[1].addEventListener('mousemove', function(e){    
        endpoint1 = e.clientX
        if (clickon == true){
            document.querySelector('.slid-container').style.transform = `translateX(clac(-100vw+${e.clientX - startpoint1})px)`
        }
        console.log(e.clientX)
       
    });
    document.querySelectorAll('.slid-card')[1].addEventListener('mouseup', function(e){
        clickon = false
        
        triggerpoint1 = endpoint1 - startpoint1;
        if (triggerpoint1 < -400){
            document.querySelector('.slid-container').style.transform = `translateX(-200vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }else if(triggerpoint1 < 800){
            document.querySelector('.slid-container').style.transform = `translateX(0vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }else {
            document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }
        setTimeout(() => {
            document.querySelector('.slid-container').style.transition = 'none';
        }, 500);
            
    });
    document.querySelectorAll('.slid-card')[2].addEventListener('mousedown', function(e){
        startpoint = e.clientX;
        clickon = true
    });
    document.querySelectorAll('.slid-card')[2].addEventListener('mousemove', function(e){    
        endpoint = e.clientX
        if (clickon == true){
        }
        console.log(e.clientX)
       
    });
    document.querySelectorAll('.slid-card')[2].addEventListener('mouseup', function(e){
        clickon = false
        
        triggerpoint = endpoint - startpoint;
        if (triggerpoint > 400){
            document.querySelector('.slid-container').style.transform = `translateX(-100vw)`
            document.querySelector('.slid-container').style.transition = 'all 0.6s'
        }
        setTimeout(() => {
            document.querySelector('.slid-container').style.transition = 'none';
        }, 500);
            
    });
    1~3번 이미지까지 스와이프는 다 잘 작동하는데 2에서 3번 이미지로 스와이프 전 후로 이미지가 움직이지 않습니다.
    mouseup 이벤트가 끝나면 작동하긴 하는데 그 전의 이벤트가 작동하지 않아서 질문드립니다.
    
    
    
    
    
    제목 없는 동영상 - Clipchamp로 제작
    
    
    
    #119586

    codingapple
    키 마스터
    document.querySelectorAll('.slid-card')[2].addEventListener('mousemove', function(e){    
        endpoint = e.clientX
        if (clickon == true){
        }
        console.log(e.clientX)
       
    });
    여기 if문이 비어있어서 아무동작 안하는듯요
    #119748

    송승환
    참가자
    감사합니다
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

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

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

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