터치슬라이더 응용 질문드립니다..!

[김철준]

선생님 hammer js를 이용해서 제가 만들고 있는 슬라이더에 적용시키려고 하는데.. 강의에 나온 슬라이더랑 방식이 좀 달라서 헤매고 있습니다.. ㅠ 

 

https://hmmiii.github.io/projects/Portfolio

지금 호스팅에는 클릭시 이동으로 구현해두었고 클래스가 계속 움직이면서 무한반복되는 슬라이더입니다. 

그래서 클릭시 클래스가 중복이 안 되고 extra-prev, prev, current, next, extra-next로 바뀌면서 이동하는데, 터치를 적용하고나니 클래스가 중복으로 먹어서인지 엉망이 되는 것 같습니다. 어느 부분을 손봐야 할까요...?

 

#슬라이더 클릭기능

$('#portfolio ul').on('click',function(e){
if($(e.target).hasClass('prev')){
$('.extra-prev').attr('class','prev');
$('.extra-next').attr('class','extra-prev');
$('.next').attr('class','extra-next');
$('.current').attr('class','next');
$(e.target).attr('class','current');

$('.extra-next').css('z-index','1');
$('.extra-prev').css('z-index','0');
$('.current').css('z-index','3');
$('.prev').css('z-index','2');
$('.next').css('z-index','2');

}
if($(e.target).hasClass('next')){
$('.extra-next').attr('class','next');
$('.extra-prev').attr('class','extra-next');
$('.prev').attr('class','extra-prev');
$('.current').attr('class','prev');
$(e.target).attr('class','current');

$('.extra-next').css('z-index','0');
$('.extra-prev').css('z-index','1');
$('.current').css('z-index','3');
$('.prev').css('z-index','2');
$('.next').css('z-index','2');
}
});

 

 

#슬라이더 터치슬라이더 응용 시도해본 코드

var 슬라이더 = document.querySelector('#portfolio ul');
var 이미지 = document.querySelector('#portfolio li');
 
var 매니저 = new Hammer.Manager(슬라이더);
매니저.add(new Hammer.Pan({ threshold: 0 }));
 
매니저.on('pan', function(e){
console.log(e.deltaX)
if(e.deltaX >= 이미지.clientWidth){
$('.extra-prev').attr('class','prev');
$('.extra-next').attr('class','extra-prev');
$('.next').attr('class','extra-next');
$('.current').attr('class','next');
$('.prev').attr('class','current');

$('.extra-next').css('z-index','1');
$('.extra-prev').css('z-index','0');
$('.current').css('z-index','3');
$('.prev').css('z-index','2');
$('.next').css('z-index','2');
}
})

 

 

 

 

#css파일

#portfolio{
background-color: #fff;
}
#portfolio ul::after{
@extend %after-canceler;

}
#portfolio ul{
margin: 0 auto;
width: 100vw;
height: 100vh;
position: relative;

}
#portfolio li{
width: 87.5vh;
height: 55vh;
display: block;
position: absolute;
transition: left .5s, transform .5s;
border-radius: 4px;
cursor: pointer;
}
#portfolio li:nth-of-type(1){
background-color:darkblue;
}
#portfolio li:nth-of-type(2){
background-color:bisque;
}
#portfolio li:nth-of-type(3){
background-color:cadetblue;
}
#portfolio li:nth-of-type(4){
background-color:darkgreen;
}
#portfolio li:nth-of-type(5){
background-color:dodgerblue;
}
#portfolio .prev{
left: -10%;
}
#portfolio .next{
left: calc(110% - 87.5vh);
}
#portfolio .next,#portfolio .prev{
z-index: 2;
transform: scale(0.8);
}
#portfolio .current{
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.extra-prev,.extra-next{
z-index: 1;
transform: scale(0.5);
}
#portfolio .extra-prev{
left:-87.5vh;
}
#portfolio .extra-next{
left:100%;
}
#portfolio .extra-hide{
display: none;
}

 

[codingapple]

드래그하면 실시간으로 이미지가 움직이길 원하면 class 부착만으로는 어렵습니다 

이미지 위치를 e.deltaX + 무언가로 실시간으로 변경하는 코드가 필요할듯요 

[글쓴이]

글