[2025년 최신] Swiper.js 세로 슬라이드 구현 | 탭 버튼과 함께 적용

 

안녕하세요 찐망고입니다.

간만에 swiper관련 포스팅을..

 

이번반 학생이 클론 하는 사이트인데요.

이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.

이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠

사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.

 

 

지금은 충전중 │ 현대자동차

 

아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요

텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.

선택된 버튼은 배경이 흰색으로 강조되며, 나머지는 반투명한 효과로 처리되죠!

지금은 충전중 현대자동차 관련 섹션

 

 

일단 html 코드는 아래처럼~

깔끔하게 짠 학생입니다. 이미지 경로는 로컬이라 감안하고 보세요.

위에 tab_list클래스로 각 버튼을 li로 감싸고

해당 슬라이드 이미지에 해당하는 button요소에 on클래스를 추가할 계획이에요.

<div class="tab_wrap">
    <!-- 탭 버튼 리스트 -->
    <ul class="tab_list">
        <li class="tab_item">
            <button type="button">
                아이가 있어서 자동차 없이
                <span class="flex_box">여행을 다니기 부담스러웠어요
                    <figure class="tab_ico tab_ico_01" alt=""
                        style="background-image: url(assets/ico_tab_01.png);"></figure>
                </span>
            </button>
        </li>
        <!-- 추가적인 탭 아이템들 -->
    </ul>

    <!-- Swiper 슬라이더 (배경 전환) -->
    <div class="tab_container">
        <div class="swiper tab-slider">
            <div class="swiper-wrapper tab_contents">
                <div class="swiper-slide panel">bg이미지</div>
                <div class="swiper-slide panel">bg이미지</div>
            </div>
        </div>
    </div>
</div>

 

버튼 클래스 추가해 주고

.tab_list > li > button.on {
    color: var(--gray-700);
    background-color: #fff;
}

 

 

swiper를 연결한 js코드입니다.

const tabItems = document.querySelectorAll(".tab_list .tab_item");
/* swiper슬라이더 */
let tabSlide = new Swiper(".tab-slider", {
    loop: true,
    direction: "vertical",
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
    },
    on: {
    	/* 슬라이드 변경 시 탭 버튼도 업데이트 */
        slideChange: function() {
            console.log(this.realIndex)
            updateActiveTab(this.realIndex);
        }
    }
});

/* 탭 버튼 클릭 시 Swiper 슬라이드 변경 */
tabItems.forEach((item, index) => {
    item.addEventListener("click", function() {
        tabSlide.slideToLoop(index);
        updateActiveTab(index);
    })
})

/* 현재 활성화된 탭 버튼에 on 클래스 추가 */
function updateActiveTab(activeIndex) {
    tabItems.forEach((item, index) => {
        const button = item.querySelector('button');
        if(index === activeIndex) {
            button.classList.add("on");
        } else {
            button.classList.remove("on");
        }
    })
}

/* 초기 로딩 시 현재 활성화된 버튼 스타일 적용  */
updateActiveTab(tabSlide.realIndex);

1. tabItems 선언 (탭 버튼 리스트 가져오기)
   
   • . tab_list .tab_item 클래스를 가진 모든 <li class="tab_item"> 요소를 tabItems에 저장
   • 즉, 탭 버튼 요소들을 배열처럼 관리하기 위한 변수
2. Swiper 슬라이더
   
   • .tab-slider 클래스를 가진 Swiper 슬라이더를 생성
   • 슬라이드가 변경될 때 slideChange 이벤트가 발생하며 현재 활성화된 슬라이드 인덱스를 realIndex로 가져옴
   • updateActiveTab(this.realIndex);를 호출하여 탭 버튼의 on 클래스를 업데이트
3. 탭 버튼 클릭 시 해당 슬라이드로 이동
   
   • 모든 .tab_item에 대해 forEach를 이용해 클릭 이벤트 추가
   • 버튼을 클릭하면 해당 인덱스의 슬라이드로 이동 (tabSlide.slideToLoop(index))
   • updateActiveTab(index)를 호출해 해당 버튼에 on 클래스를 추가하고 나머지는 제거
     
     
4. updateActiveTab 함수 (현재 활성화된 탭 버튼 스타일 변경)
   
   • 현재 활성화된 슬라이드의 인덱스 (activeIndex)를 기준으로 .tab_item 안의 <button> 요소를 업데이트
   • 현재 활성화된 버튼에는 "on" 클래스를 추가, 나머지는 "on" 클래스를 제거
5. 초기 on 클래스 세팅
   

 

해당 클론 사이트 링크 바로가기 (3개월 유지예정 - 다른 섹션 작업 중)

지금은 충전중 │ 현대자동차