캐러셀 스와이프 응용 질문입니다

[병아리짹짹]

1번 캐러셀에서는 잘 작동하여 2번 캐러셀일 때는 1번 캐러셀의 코드에 뒤에 -100vw를 붙여서 코드를 짰는데 
transition쪽이 작동이 되지 않습니다(넘어가는건 되는데 드래그할 때는 사진 안 움직이다가 mouseup되면 캐러셀 이동)

어디가 문제인지 한번 봐주세요

아래는 코드입니다

let 시작좌표 =0
  let 확인 = false
  $(".slide-box").eq(0).on("mousedown",function(e){
    시작좌표 = e.clientX;
    확인 = true
  })
    $(".slide-box").eq(0).on("mousemove", function(e){
        if(확인 == true) {
        console.log(e.clientX - 시작좌표);
        $(".slide-container").css("transform", `translateX(${e.clientX - 시작좌표}px)`)
        }});
        $(".slide-box").eq(0).on("mouseup", function(e){
            확인 = false;
            if(e.clientX - 시작좌표 <-100) {
              $(".slide-container")
              .css("transition", "all 0.5s")
              .css("transform", "translateX(-100vw)")
            }

            else {
              $(".slide-container")
              .css("transition", "all 0.5s")
              .css("transform", "translateX(0vw)")
            }
            setTimeout(function(){
              $(".slide-container").css("transition",500)
            })
        });
잘 작동되는 1번 캐러셀 코드

$(".slide-box").eq(1).on("mousedown",function(e){
                시작좌표 = e.clientX;
                확인 = true
              })
              $(".slide-box").eq(1).on("mousemove", function(e){
                if(확인 == true) {
                console.log(e.clientX - 시작좌표);
                $(".slide-container").css("transform", `translateX(cal(${e.clientX - 시작좌표}+-100vw)px)`)
                }});
                $(".slide-box").eq(1).on("mouseup", function(e){
                    확인 = false;
                    if(e.clientX - 시작좌표 <-100) {
                      $(".slide-container")
                      .css("transition", "all 0.5s")
                      .css("transform", `translateX(-200vw)`)
                    }
        
                    else if (e.clientX - 시작좌표>100){
                      $(".slide-container")
                      .css("transition", "all 0.5s")
                      .css("transform", `translateX(0vw)`)
                    }
                    else {
                      $(".slide-container")
                      .css("transition", "all 0.5s")
                      .css("transform", `translateX(-100vw)`)

                    }
                    setTimeout(function(){
                      $(".slide-container").css("transition","none"),500})
                });

작동안되는 2번 캐러셀 코드

[codingapple]

translateX(cal(${e.clientX - 시작좌표}px-100vw)) 해봅시다

[병아리짹짹]

그렇게 했는데도 transform이 안 먹힙니다

 $(".slide-container").css("transform", `translateX(cal(${e.clientX - 시작좌표}+-100vw)px)`) 여기서

 $(".slide-container").css("transform", `translateX(cal(${e.clientX - 시작좌표}px-100vw))`) 로 바꾸어도 마찬가지고

 $(".slide-container").css("transform", `translateX(${e.clientX - 시작좌표}px-100vw)`) 해도 마찬가지고

 $(".slide-container").css("transform", `translateX(-100vw)`)로 하면 안되는건 당연하지만

transition 써보면 어떨까해서

$(".slide-container").css("transition","all 0.5s").css("transform", `translateX(${e.clientX - 시작좌표}px-100vw)`) 해봐도 안되는데

드래그할때 그림이 같이 당겨지는 것을 보여주려면 어떻게 해야 할까요ㅠㅠ

[codingapple]

cal 말고 calc 인듯요

[글쓴이]

글