2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 9월 25일 20:41 #99207
손성호참가자<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="1.css"> <title>Document</title> </head><body>
<div style="overflow: hidden"> <div class="slide-container"> <div class="slide-box"> < img src="/img/car1.png" draggable="false"> </div> <div class="slide-box"> < img src="/img/car2.png" draggable="false"> </div> <div class="slide-box"> < img src="/img/car3.png" draggable="false"> </div> </div> </div><button class="slide-pre">이전</button> <button class="slide-1">1</button> <button class="slide-2">2</button> <button class="slide-3">3</button> <button class="slide-next">다음</button><script> //스와이프기능var swipestart = 0; var click = false;$('.slide-box').eq(0).on('mousedown', function(e) { console.log(e.clientX); swipestart = e.clientX; click = true;}) $('.slide-box').eq(0).on('mousemove', function(e) {if (click == true) { console.log(e.clientX - swipestart); $('.slide-container').css('transform', `translateX(${e.clientX - swipestart}px)`) } }) $('.slide-box').eq(0).on('mouseup',function(e){ click= false; if((e.clientX - swipestart) < -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) }) </script></body></html> 스르륵 움직이는 transition 상태가 처음부터 풀리질 않습니다 "slide-container" class css에 transition 을 지워도 계속 걸려있는 상태고 .css('transition','all 0.5s')을 적든 안적든 계속 디폴트로 transition 상태가 걸려 있습니다. 무시하고 그냥 setTimeout 을 거니까 첫클릭때 transition 상태이고 두번째 클릭이 되서야 그게 풀립니다. 부트스트랩 문제인가 싶어 지워봤지만 안사라집니다. -
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.