캐러셀 swipe 질문 드립니다....

[이미연]

$('.sb').eq(0).on('mousedown',e=>{st=e.clientX;console.log('시작',st); clic=true;});
$('.sb').eq(0).on('mouseup',e=>{clic=false;console.log('끝',e.clientX,'끝-시작',e.clientX - st);  if((e.clientX-st)<-200){
$('.sl').css({'transform': 'translateX(-100vw)','transition': 'all 0.5s'})
}else{$('.sl').css('transform','translateX(0)')};  
위에는 잘 작동합니다.

$('.sb').eq(1).on('mousedown',e=>{st=e.clientX;console.log('시작',st); clic=true;});
$('.sb').eq(1).on('mousemove',e=>{ if(clic==true){ 
$('.sl').css('transform', `translateX(calc(${e.clientX-st}px-100vw))`)}; });
$('.sb').eq(1).on('mouseup',e=>{clic=false;console.log('끝',e.clientX,'끝-시작',e.clientX - st); 
 if((e.clientX-st)<-200){
$('.sl').css({'transform': 'translateX(-200vw)','transition': 'all 0.5s'})
근데, 위에가,  'translateX(-200vw)' 는 잘 작동하는데,  실시간 'mousemove', 
 `translateX(calc(${e.clientX-st}px-100vw))`)}; 당겨지지않고, 아무 움직임이 없습니다.
스와이프 게시판 질문들을 봤을때, 저도 똑같이 무브를 줬는데, 저는 왜 2번에서 3번 그림이 
실시간 무브 이동 되지 않는지, 모르겠습니다. 도움부탁드립니다. 감사합니다...
참고로,  img 3 개 다  draggable="false" 주었습니다.

[codingapple]

mousemove시 clic 변수나 e.clientX-st 변수같은거 잘나오나 출력해봅시다

[이미연]

}.sl { width: 300vw; 
}.sb { width: 100vw;float: left;
} .sb img {width: 100%;height: 60%;}
<div class="sl">
    <div class="sb">< img src='../img/car1.png' draggable="false"></div>
  <div class="sb">< img src='../img/car2.png' draggable="false"></div>
  <div class="sb">< img src='../img/car3.png' draggable="false"></div>
</div></div>

let st=0; let clic=false;

$('.sb').eq(0).on('mousedown',e=>{st=e.clientX;console.log('시작',st); clic=true;});
$('.sb').eq(0).on('mouseup',e=>{clic=false;console.log('끝',e.clientX,'끝-시작',e.clientX - st);  if((e.clientX-st)<-200){
$('.sl').css({'transform': 'translateX(-100vw)','transition': 'all 0.5s'})
}else{$('.sl').css('transform','translateX(0)')};
setTimeout(()=>{$('.sl').css('transition','none')},500)});

$('.sb').eq(0).on('mousemove',e=>{console.log(clic,e.clientX-st);if(clic==true && (e.clientX - st)<0){ 
 $('.sl').css('transform', `translateX(${e.clientX - st}px)`)}; });
$('.sb').eq(1).on('mousedown',e=>{st=e.clientX;console.log('시작',st); clic=true;});
$('.sb').eq(1).on('mousemove',e=>{console.log(clic,e.clientX-st);
                                  if(clic==true){ 
$('.sl').css('transform', `translateX(calc(${e.clientX-st}px-100vw))`)}; });
$('.sb').eq(1).on('mouseup',e=>{clic=false;console.log('끝',e.clientX,'끝-시작',e.clientX - st);  if((e.clientX-st)<-200){
$('.sl').css({'transform': 'translateX(-200vw)','transition': 'all 0.5s'})
}else{$('.sl').css('transform','translateX(-100vw)')};
setTimeout(()=>{ $('.sl').css('transition','none')},500)});

$('.sb').eq(0).on('mousemove',e=>{console.log(clic,e.clientX-st) 클릭 후 무브 할때 마다 
true -199  이런식으로 실시간 출력됩니다.
$('.sb').eq(1).on('mousemove',e=>{console.log(clic,e.clientX-st); 이것도, true -187 잘 출력
되고, true -202 초과 시에는 다음으로 넘어갑니다. 그런데, 0과 같이 1이 당겨지지 않습니다. 
한번만 봐주시면 정말 감사하겠습니다..

[이미연]

해결되었습니다. 감사합니다.   `translateX(calc(${e.clientX-st}px - 100vw))` 이게 실행되고,
 `translateX(calc(${e.clientX-st}px-100vw))`  이건 실행 안 되는거였습니다....

[글쓴이]

글