케러셀스와이프하는중에

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

글쓴이

글
2022년 4월 29일 22:38 #32902

조승엽
참가자

드래그할때 1번사진에서 2번사진으로 드래그 할때는 잘 움직이는데 다른사진에서 누른후 살짝만 드래그해도 1번사진으로 바뀌면서 거기서 움직이더라고요. 어떻게 하는지도 궁금하지만요. 시도해본것중에 먼저 다음 이전 버튼을 vw가 아닌 px로 바꿨는데요.

`translateX(${ (지금사진-1)*-window.innerWidth }px 는 잘 되는데

mouseup은 $('.next')click() 로 바꾸고

mousemove안에선 translateX(${ ((지금사진-1)*-window.innerWidth)-(e.clientX - 시작좌표) }px) 는 꿈쩍도 안하더라고요.

이것도 왜 그런지 모르겠네요.

2022년 4월 30일 09:55 #32916

codingapple
키 마스터

clientX아니면 시작좌표가 없거나 이상한게 아닐까요 우선 출력해봅시다

2022년 4월 30일 11:26 #32926

조승엽
참가자

<!doctype html>
<html lang="en">
  <head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

  <title>Hello, world!</title>
  </head>
  <body>

  <div class="black-bg">
  <div class="white-bg">
  <h4>로그인하세요.</h4>
  <form action="success.html">
  <div class="my-3">
  <input type="text" class="form-control" id="email">
  </div>
  <div class="my-3">
  <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary" id="send">전송</button>
  <button type="button" class="btn btn-danger" id="close">닫기</button>
  </form>
  </div>
  </div>

  <script>

  $('form').on('submit',function (e) {
  let 입력한이메일 = $('#email').val();
  let 입력한비번 = $('#password').val();
  if( 입력한이메일 == ''){
  alert('아이디를 입력하세요.');
  e.preventDefault();
}else{
  if(!/\S+@\S+\.\S+/.test(입력한이메일)){
  alert('이메일형식아님')
  e.preventDefault();
}else{
  if(입력한비번.length < 6){
  alert('비번이 짧습니다.');
  e.preventDefault();
}else if(!/[A-Z]/.test(입력한비번)){
  alert('비번에 대문자를 적어도 하나이상 추가하십시오.');
  e.preventDefault();
}
}
}

})
  </script>

  <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
  <span class="navbar-brand">Navbar</span>
  <span class="badge bg-dark">Dark 🔁</span>
  <button class="navbar-toggler" type="button">
  <span class="navbar-toggler-icon"></span>
  </button>
  </div>
  <div class="scroll-gauge">
  <div class="scroll-gauge-percent"></div>
  </div>
  </nav>

  <ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
  </ul>

  <div class="main-bg">
  <h4>Shirts on sale</h4>
  <button type="button" class="btn btn-danger" id="login">로그인</button>
  </div>

  <div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll;"> lorem af jkdhf adhflkjadshfkjWHEFU hdFdjhlksjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU hdFdjhlksjgh jhvzxkjcvj zksd haf sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU haw sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU </div>

  <div style="height: 1000px;"></div>

  <div style="overflow: hidden;">
  <div class="slide-container">
  <div class="slide-box">
  <div class="slide-frame">
  <img src="img/product1.jpg" draggable="false">
  </div>
  </div>
  <div class="slide-box">
  <div class="slide-frame">
  <img src="img/product2.jpg" draggable="false">
  </div>
  </div>
  <div class="slide-box">
  <div class="slide-frame">
  <img src="img/product3.jpg" draggable="false">
  </div>
  </div>
  <div style="clear: both;"></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>

  <script>
  let 시작좌표 = 0;
  let 눌렸냐 = false;

  let 지금사진 = 1;
  $('.next').on('click',function(){
  if(지금사진 < 3){
  지금사진 += 1;
$('.slide-container').css('transition','all 0.5s').css('transform',translateX(${(지금사진-1)*-window.innerWidth}px));
}
});
  $('.before').on('click',function(){
  if(지금사진 > 1){
  지금사진 -= 1;
$('.slide-container').css('transition','all 0.5s').css('transform','translateX('+ (지금사진-1)*-window.innerWidth +'px)');
}
});

  $('.slide-1').on('click',function(){
  $('.slide-container').css('transition','all 0.5s').css('transform','translateX(0vw)');
  지금사진 = 1;
});
  $('.slide-2').on('click',function(){
  $('.slide-container').css('transition','all 0.5s').css('transform',translateX(-${window.innerWidth}px));
  지금사진 = 2;
});
  $('.slide-3').on('click',function(){
  $('.slide-container').css('transition','all 0.5s').css('transform','translateX(-200vw)');
  지금사진 = 3;
});

  // --------------------------마우스
  $('.slide-box').on('mousedown',function(e){
  시작좌표 = e.clientX;
  눌렸냐 = true;
  $('.slide-container').css('transition','none')
})

  $('.slide-box').on('mousemove',function(e){
  if(눌렸냐){

  $('.slide-container').css('transform',translateX( ${((지금사진-1)*-window.innerWidth)-(e.clientX - 시작좌표)} px));

}
})

  $('.slide-box').on('mouseup',function(e){
  눌렸냐 = false;
  if(e.clientX - 시작좌표 < -150){
  $('.next').click();
}else if(e.clientX - 시작좌표 > 150){
  $('.before').click();
}else{
  $('.slide-container').css('transform','translateX('+ (지금사진-1)*-window.innerWidth +'px)');
}
})

  // --------------------------터치
  $('.slide-box').eq(0).on('touchstart',function(e){
  // mousedown -> touchstart
  시작좌표 = e.touches[0].clientX;
  눌렸냐 = true;
  $('.slide-container').css('transition','none')
})

  $('.slide-box').eq(0).on('touchmove',function(e){
  // mousemove -> touchmove
  if(눌렸냐){
  console.log('누름')
  console.log(e.touches[0].clientX - 시작좌표)
  $('.slide-container').css('transform',translateX(${e.touches[0].clientX - 시작좌표}px));

}else{
  console.log('땜')
}
})

  $('.slide-box').eq(0).on('touchend',function(e){
  // mouseup -> touchend
  눌렸냐 = false;
  if(e.changedTouches[0].clientX - 시작좌표< -150){
  $('.slide-container').css('transition','all 0.5s').css('transform',translateX(-100vw))

}else{
  $('.slide-container').css('transition','all 0.5s').css('transform',translateX(0vw))
}
})

  </script>

  <script>

  $('.lorem').on('scroll',function(){
  var 스크롤양 = $('.lorem').scrollTop();
  var 눈에보이는박스높이 = $('.lorem').innerHeight();
  var 실제높이 = $('.lorem').prop('scrollHeight');

  if(스크롤양 + 눈에보이는박스높이 > 실제높이 - 10){
  alert('다읽었군요.')
}
})

  $(window).on('scroll',function(){
  let 현재스크롤위치 = $(window).scrollTop();
  let 눈에보이는박스높이 = $(window).innerHeight();
  let 실제높이 = $('body').prop('scrollHeight');

  if( 현재스크롤위치 > 100){
  $('.navbar-brand').css('fontSize','25px');
  $('.scroll-gauge-percent').width(${현재스크롤위치/(실제높이-눈에보이는박스높이)*100}%);
}else{
  $('.navbar-brand').css('fontSize','30px');
  $('.scroll-gauge-percent').width(0%);
}
})

  let count = 0;

  $('.badge').on('click',function(){
  count++;
  if(count % 2 == 1){
  $('.badge').text('Light 🔁')
  $('body').addClass('dark');
}else{
  $('.badge').text('Dark 🔁');
  $('body').removeClass('dark');
}
})

  $('#login').on('click',function () {
  $('.black-bg').addClass('show-modal');
});

  $('#close').on('click',function () {
  $('.black-bg').removeClass('show-modal');
});

  $('.black-bg').on('click',function(e){

  if(e.target == e.currentTarget){
  $('.black-bg').removeClass('show-modal');
}
})

  document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
  document.getElementsByClassName('list-group')[0].classList.toggle('show');
})
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

2022년 4월 30일 20:18 #32944

codingapple
키 마스터

((지금사진-1)*-window.innerWidth)-(e.clientX-시작좌표)

수식부터 콘솔창에 출력해보면 됩니다 2번사진 건드리고 있으면 지금사진이라는 변수도 2로 잘 나오는지 확인해봅시다

2022년 4월 30일 22:39 #32958

조승엽
참가자

콘솔창에 입력했을때 지금사진은 해당사진일때 사진은 안움직이고 거기에 맞게 나오더라고요. 또 이해가 안가는 부분이 mousemove에서

$('.slide-container').css('transform',translateX(${e.clientX-시작좌표}px)); 가 첫번째사진일땐 잘움직였고 ,$('.slide-container').css('transform',translateX(${((지금사진-1)*-window.innerWidth)-(e.clientX-시작좌표)}px));는 앞에것과 콘솔로그 찍으면 숫자는 같은데 첫번째 사진일때도 안움직이더라고요.

2022년 5월 1일 09:36 #32971

codingapple
키 마스터

붙여넣어보니까

translateX(${((지금사진-1)*-window.innerWidth)+(e.clientX-시작좌표)}px)

이러면 잘되는 것 같은데요

2022년 5월 2일 11:32 #33049

조승엽
참가자

제꺼는 왜 안되는지 모르겠네요. 관련은 없을지라도 일단 css마저 올릴께요. 혹시 또 다른 방법은 어떤게 있나요?

body{
  margin: 0;
}
div{
  box-sizing: border-box;
}

.list-group{
  display: none;
}
.show{
  display: block;
}

.black-bg{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,0.5);
  z-index: 6;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}
.show-modal{
  visibility: visible;
  opacity: 1;
}
.white-bg{
  background-color: white;
  border-radius: 5px;
  padding: 30px;
}
.main-bg{
  padding: 100px 20px;
  background-color: lightgray;
}

.dark{
  background-color: black;
  color: white;
}
/* .slide-container{
width: 300vw;
transition: all 1s;
} */
.slide-container{
  width: 300vw;
}
.trasition-1s{
  transition: all 1s;
}

.slide-box{
  width: 100vw;
  float: left;
}
.slide-frame{
  width: 70%;
  margin: auto;
}
.slide-box img{
  width: 100%;
}

.navbar{
  position: fixed;
  width: 100%;
  z-index: 5;
}
.navbar-brand{
  font-size: 30px;
  transition: all 1s;
}
.scroll-gauge{
  width: 100%;
  height: 2px;
  background-color: lightgray;
}
.scroll-gauge-percent{
  width: 0%;
  height: 2px;
  background-color: brown;

}



2022년 5월 2일 16:06 #33068

codingapple
키 마스터

지금사진이라는 변수도 잘 있는지 출력해봐야할듯요

https://github.com/codingapple1/carousel-touch-test 위에있는 코드 중에 캐러셀부분만 붙여넣기해봤는데 2번사진도 마우스로 드래그 잘됩니다

2022년 5월 3일 14:59 #33130

조승엽
참가자

https://github.com/codingapple1/carousel-touch-test 에서 마우스무브쪽 복붙하니 잘되더라고요. 근데 이게 말이되나 싶은게, 같은 내용인데 앞에것은 안되고 뒤에것은 되네요. 하나씩 // 해가면서 해봤어요. 카톡상담에서 동영상 파일로 올려봤습니다.

2022년 5월 3일 18:05 #33138

codingapple
키 마스터

px 왼쪽에 띄어쓰기가 하나가 있나봅니다
글쓴이

글

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

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

로그인

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