회전목마같이 옆으로 넘어가는 슬라이드
그냥 라이브러리를 쓰지않고 구현해보았다.
var nowImage = 1;//최대 3장이며, 현재 첫번째 이미지
$('.slide-next').click(function() { //다음버튼을 누르면
if (nowImage == 3) {//최대 3장을 넘어가면 안되게 동작.
return;
} else {//3장 이전에 다음버튼을 누르면,
$('.slide-container').css('transform', 'translateX(-' + nowImage + '00vw)');//다음 이미지로 이동
if (nowImage < 3) {//현재 세번째 이미지가 아니라면,
nowImage = nowImage + 1;//다음 이미지 저장
}
}
});
$('.slide-before').click(function() {//이전버튼을 누르면,
$('.slide-container').css('transform', 'translateX(-' + (nowImage - 2) + '00vw)');//이전 이미지로 이동
if (nowImage > 1) {//현재 첫번째 이미지가 아니라면,
nowImage = nowImage - 1;//이전 이미지 저장
}
});
$(window).on('scroll', function() { //뷰포트인 window 기준으로, scroll될 때
if (window.scrollY > 50) { //50px 위라면,
$('.nav-menu').addClass('nav-black'); // 검은배경으로 설정한다.
$('.large-logo').addClass('small-logo'); // 글씨를 작게 설정한다.
} else {
$('.nav-menu').removeClass('nav-black'); // 흰배경으로 다시 설정한다.
$('.large-logo').removeClass('small-logo'); // 글씨를 다시 크게 설정한다.
}
});
for (let i = 0; i < $('.tab-button').length; i++) { //현재 tap 버튼 개수만큼
$('.tab-button').eq(i).click(function() {
$('.tab-button').removeClass('active'); //일단 위에 주황색 선을 다 없앤다
$('.tab-content').removeClass('show'); //일단 tab 내용이 다 안보이게 설정한다.
$('.tab-button').eq(i).addClass('active'); //해당 tab을 누르면 위에 주황색 선 설정한다.
$('.tab-content').eq(i).addClass('show'); //해당 tab을 누르면 내용이 보이도록 설정한다.
});
}