슬라이더 한번만 도와주심 감사하겠습니다.

[김철준]

 

var prev = $('#portfolio .prev');
var current = $('#portfolio .current');
var next = $('#portfolio .next');

prev.on('click',function(){
  current.addClass('prev');
  current.removeClass('current');
  prev.addClass('current');
  prev.removeClass('prev');
  prev = $('#portfolio .prev');
  current = $('#portfolio .current');
});

 

소스는 이러한데.. 이상하게 한번은 이벤트 실행이 되는데 두번째에는 prev가 슬라이드 2로 바뀌었는데도 여전히 슬라이드1을 눌러야 이벤트가 실행됩니다 ㅜㅜ 왜 그런걸까요

[codingapple]

왜냐면 1회 누르고 나서 생긴 새로운 prev에는 이벤트리스너가 장착되지 않아서 그런듯요 

클래스명만 바꾸는게 아니라 다른 방법을 찾아봅시다 

[김철준]

감사합니다. e.target을 사용해서 그 문제는 해결했습니다. 그런데 제가 슬라이더를 position과 transform을 통해서 움직이도록 만들었는데..

 

현재 선택된 슬라이더 (current 클래스 부착)시에 left를 통해 가운데 정렬을 하다 보니 right -> left로 이동해서인지..   next 슬라이더를 선택하고 넘어갈 때 애니메이션이 버벅이는 현상이 있는데.. 방법이 없을까요?? 둘다 left를 주니 next가 브라우저 크기에 따라 이동합니다 ㅜ

 

#portfolio ul{
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  position: relative;
}
#portfolio li{
  width: 87.5vh;
  height: 55vh;
  display: block;
  position: absolute;
  transition: left 1.5s, right 1.5s, transform 1.5s;
  border-radius: 4px;
  cursor: pointer;
}
#portfolio li:nth-of-type(1){
  background-color:bisque;
}
#portfolio li:nth-of-type(2){
  background-color:cadetblue;
}
#portfolio li:nth-of-type(3){
  background-color:darkgreen;
}
#portfolio .prev{
  left: -12.5vh;
}
#portfolio .next{
  right: -12.5vh;
}
#portfolio .next,#portfolio .prev{
  transform: scale(0.8);
}
#portfolio .current{
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

[codingapple]

부드럽지않고 프레임이 떨어지는 문제라면 right, left를 조작해서 그렇습니다

레이아웃에 애니메이션 주면 프레임이 떨어집니다 

[글쓴이]

글