Swiper 슬라이더와 탭 연동하기, loop해결

 

안녕하세요 찐망고입니다

오늘은 tab과 swiper슬라이드를 연결할 건데요.

예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.

 

swiper tab slider

 

1. Tab과 슬라이더를 연결

2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함

3. Tab클릭시 슬라이더는 모두 loop처리되어야 함

 

이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다.

 

Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.

리스트 하나는 ALL버튼입니다.

처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요.

 

아래는 html코드입니다.

<div class="tab">
    <ul>
        <li class="all-btn active"><button type="button">ALL</button></li>
        <li class="eye-btn"><button type="button">EYE</button></li>
        <li class="lip-btn"><button type="button">LIP</button></li>
        <li class="base-btn"><button type="button">BASE</button></li>
        <li class="others-btn"><button type="button">OTHERS</button></li>
    </ul>
</div>

 

플러그인은 swiper를 이용하여 따로 div로 만들어 줍니다.

<div class="swiper best-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide box1 base">~</div>
        <div class="swiper-slide box2 lip">~</div>
        <div class="swiper-slide box3 base">~</div>
        <div class="swiper-slide box4 eye">~</div>
        <div class="swiper-slide box5 lip">~</div>
        <div class="swiper-slide box6 base">~</div>
        <div class="swiper-slide box7 eye">~</div>
        <div class="swiper-slide box8 eye">~</div>
        <div class="swiper-slide box9 lip">~</div>
        <div class="swiper-slide box10 base">~</div>
        <div class="swiper-slide box11 others">~</div>
        <div class="swiper-slide box12 others">~</div>
        <div class="swiper-slide box13 others">~</div>
        <div class="swiper-slide box14 eye">~</div>        
    </div>
</div>

 

 

JS코드

중복되는 코드는 함수로 분리가능합니다. (안했음)

// Swiper 초기화
let swiper03 = new Swiper(".best-swiper", {
    loop: true, // 슬라이더가 끝에 도달해도 처음으로 다시 돌아가도록 설정
    slidesPerView: 1.84, // 한 번에 보여질 슬라이드 개수
    spaceBetween: 10, // 슬라이드 간격
    breakpoints: {
        479: {
            slidesPerView: 2.3,
            spaceBetween: 10,
        },
        639: {
            slidesPerView: 3.4,
            spaceBetween: 10,
        },
        799: {
            slidesPerView: 3.4,
            spaceBetween: 10,
        }
    },
});

// 탭 버튼과 슬라이드 연결
const tabBtns = document.querySelectorAll(".tab ul li");
const allSlides = Array.from(document.querySelectorAll(".best-swiper .swiper-slide"));

// 탭 클릭 시 슬라이드 필터링
tabBtns.forEach((tab) => {
    tab.addEventListener("click", function () {
        const targetClass = tab.classList[0].replace('-btn', ''); // 'eye-btn' -> 'eye'

        // Swiper 모든 슬라이드 제거
        swiper03.removeAllSlides();

        if (tab.classList.contains("all-btn")) {
            // 'ALL' 버튼이 클릭되면 모든 슬라이드 추가
            swiper03.appendSlide(allSlides.map(slide => slide.outerHTML));
        } else {
            // 각 탭과 연관된 클래스에 맞는 슬라이드만 추가
            const filteredSlides = allSlides.filter(slide => slide.classList.contains(targetClass));
            swiper03.appendSlide(filteredSlides.map(slide => slide.outerHTML));
        }

        // Swiper를 업데이트하고 첫 슬라이드로 이동
        swiper03.update();
        swiper03.slideToLoop(0); // 첫 슬라이드로 이동 (loop 기능)

        // active 클래스 제어
        tabBtns.forEach(otherTab => otherTab.classList.remove("active"));
        tab.classList.add("active");
    });
});

 

 

 

아래서 확인해 보세요~

 

See the Pen tab swiper - loop by 찐망고 (@nnwbliyz-the-styleful) on CodePen.