캐러셀 스와이프2 응용 질문드립니다.

3 글 보임 - 1 에서 3 까지 (총 3 중에서)

글쓴이

글

2023년 1월 2일 16:11 #60573

참가자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cell.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
</head>
<body>
    
    <div style="overflow: hidden">
        <div class="slide-container">
          <div class="slide-box">
            < img src="car1.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="car2.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="car3.png" draggable="false">
          </div>
        </div>
    </div>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>
    <button class="before">이전</button>
</body>
<script>

var startPoint =0;
var clicked =false;
    $('.slide-box').eq(0).on('mousedown',function(e){
    startPoint= e.clientX; //시작좌표
    clicked = true;//눌렀을때
    });
    $('.slide-box').eq(0).on('mousemove',function(e){
    if(clicked==true){
        $('.slide-container').css('transform', `translateX(${e.clientX -  startPoint}px)`)
    }
    });
    $('.slide-box').eq(0).on('mouseup',function(e){
    clicked = false;
    if (e.clientX - startPoint < -200) {
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');      
    } else {
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
    } 
    setTimeout(()=>{
        $('.slide-container').css('transition', 'none')
    }, 500)
});

    $('.slide-box').eq(1).on('mousedown',function(e){
    startPoint= e.clientX; //시작좌표
    clicked = true;//눌렀을때
    });

    $('.slide-box').eq(1).on('mousemove',function(e){
    if(clicked==true){
        $('.slide-container').css('transform', `translateX(calc(${e.clientX -  startPoint}px - 100vw))`)
    }
    });

    $('.slide-box').eq(1).on('mouseup',function(e){
    clicked = false;
    if (e.clientX - startPoint < -200) {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)');
    } else {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
    }
    setTimeout(()=>{
      $('.slide-container').css('transition', 'none')
    }, 500)
  });

    
  $('.slide-box').eq(2).on('mousedown',function(e){
    startPoint= e.clientX; 
    clicked = true;
    });

    $('.slide-box').eq(2).on('mousemove',function(e){
    if(clicked==true){
        $('.slide-container').css('transform', `translateX(calc(${e.clientX -  startPoint}px - 200vw))`)
    }
    });

    $('.slide-box').eq(2).on('mouseup',function(e){
    clicked = false;
    if (clientX - startPoint > 200) {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
    } else {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)');
    }
    setTimeout(()=>{
      $('.slide-container').css('transition', 'none')
    }, 500)
  });




0번에서 1번, 1번에서 2번까지 정방향은 잘되는데 2번에서 1번 역방향으로 스와이프할때 
사진처럼 중간에 멈춥니다 뭐가문제인가요..ㅠㅜ

2023년 1월 2일 19:00 #60606

codingapple

키 마스터

마지막이벤트리스너에 e.clientX 여야할듯요

2023년 1월 3일 10:51 #60760

LEENARA

참가자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cell.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
</head>
<body>
    
    <div style="overflow: hidden">
        <div class="slide-container">
          <div class="slide-box">
            < img src="car1.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="car2.png" draggable="false">
          </div>
          <div class="slide-box">
            < img src="car3.png" draggable="false">
          </div>
        </div>
    </div>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>
    <button class="before">이전</button>
</body>
<script>

var startPoint =0;
var clicked =false;
    $('.slide-box').eq(0).on('mousedown',function(e){
    startPoint= e.clientX; //시작좌표
    clicked = true;//눌렀을때
    });
    $('.slide-box').eq(0).on('mousemove',function(e){
    if(clicked==true){
      $('.slide-container').css('transform', `translateX(${e.clientX -  startPoint}px)`)
    } 
    
    });
    $('.slide-box').eq(0).on('mouseup',function(e){
    clicked = false;
    if (e.clientX - startPoint < -200) {
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');      
    } else if(e.clientX - startPoint < -200) {
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
    }
    setTimeout(()=>{
        $('.slide-container').css('transition', 'none')
    }, 500)
});

    $('.slide-box').eq(1).on('mousedown',function(e){
    startPoint= e.clientX; //시작좌표
    clicked = true;//눌렀을때
    });

    $('.slide-box').eq(1).on('mousemove',function(e){
    if(clicked==true){
        $('.slide-container').css('transform', `translateX(calc(${e.clientX -  startPoint}px - 100vw))`)
    }
    });

    $('.slide-box').eq(1).on('mouseup',function(e){
    clicked = false;
    if (e.clientX - startPoint < -200) {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)');
    } else if(e.clientX - startPoint < -200){
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
    } else if(e.clientX - startPoint > 200){
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
    } else {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
    }

    setTimeout(()=>{
      $('.slide-container').css('transition', 'none')
    }, 500)
  });

    
  $('.slide-box').eq(2).on('mousedown',function(e){
    startPoint= e.clientX; //시작좌표
    clicked = true;//눌렀을때
    });

    $('.slide-box').eq(2).on('mousemove',function(e){
    if(clicked==true){
        $('.slide-container').css('transform', `translateX(calc(${e.clientX -  startPoint}px - 200vw))`)
    }
    });

    $('.slide-box').eq(2).on('mouseup',function(e){
    clicked = false;
    if (e.clientX - startPoint > 200) {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
    } else {
      $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)');
    }
    setTimeout(()=>{
      $('.slide-container').css('transition', 'none')
    }, 500)
  });

    setTimeout(()=>{
      $('.slide-container').css('transition', 'none')
    }, 500)

감사합니다
0 >> 1 >> 2 
0 << 1 << 2 까지 잘동작하는데
0에서 우측으로 스와이프할때 흰색화면 나오는걸 안나오게하려하는데 전혀 감이 안잡힙니다.. 
if문을 쓰면 된다하셨는데 어떻게해야할지 모르겠습니다 ㅠㅠ

글쓴이

글

3 글 보임 - 1 에서 3 까지 (총 3 중에서)

답변은 로그인 후 가능합니다.

로그인

캐러셀 스와이프2 응용 질문드립니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png