안녕하세요. 혼자 해결해 보려고 했지만 도저히 모르겠어요ㅠㅠ. 스와이프가 안 됩니다.. 왜 인지 모르겠어요ㅜㅜ...
<html>
<div style="overflow: hidden;">
<div class="slide-container">
<div class="slide-box">
< img src="img/car1.png" draggable="false">
</div>
<div class="slide-box">
< img src="img/car2.png">
</div>
<div class="slide-box">
< img src="img/car3.png">
</div>
</div>
</div>
<button class="before">Before</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">Next</button>
<script>
$('.slide-1').on('click', function() {
$('.slide-container').css('transform', 'translateX(0)');
})
$('.slide-2').on('click', function() {
$('.slide-container').css('transform', 'translateX(-100vw)');
})
$('.slide-3').on('click', function() {
$('.slide-container').css('transform', 'translateX(-200vw)');
})
// 다음 버튼 누르면
// 지금 보이는 사진이 1이면 2번 사진 보여주세요
var currentPhoto = 0;
var totalPhotos = $('.slide-container .slide-box').length;
console.log(totalPhotos);
$('.next').on('click', function() {
currentPhoto += 1;
if (currentPhoto > totalPhotos) {
currentPhoto = 0;
}
updateSlide();
console.log(currentPhoto);
})
$('.before').on('click', function() {
currentPhoto -= 1;
if (currentPhoto < 0) {
currentPhoto = totalPhotos - 1;
}
updateSlide();
console.log(currentPhoto);
})
function updateSlide() {
$('.slide-container').css('transform', 'translateX(-' + currentPhoto + '00vw)');
}
var startX = 0;
var isMouseDown = false;
$('.slide-box').eq(0).on('mousedown', function(e) {
startX = e.clientX;
isMouseDown = true;
})
$('.slide-box').eq(0).on('mousemove', function(e) {
if ( isMouseDown ) {
console.log(e.clientX - startX);
$('.slide-container').css('transform', `translateX( ${e.clientX-startX} px)`);
}
})
<css>
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 100%;
}
