슬라이드, 스크롤, 탭

Carousel

회전목마같이 옆으로 넘어가는 슬라이드
그냥 라이브러리를 쓰지않고 구현해보았다.

이미지 1

이미지 2

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;//이전 이미지 저장
            }
        });

navBar 스크롤 애니메이션

스크롤 전

스크롤 후

$(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'); // 글씨를 다시 크게 설정한다.
            }
        });

탭 기능

탭 1

탭 2

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을 누르면 내용이 보이도록 설정한다.
            });
        }