Swiper로 만드는 반응형 탭 인터페이스 - 구루미비즈 예제

 

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

오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요.

 

참고 사이트는 구루미비즈입니다. 

AI 화상 솔루션 구루미비즈

 

구루미비즈 슬라이드 탭

 

 

 

먼저, 각각의 Swiper 코드부터 살펴볼까요?

const swiper01 = new Swiper(".s01-swiper", {
    slidesPerView: 1.3,
    spaceBetween: 20,
    pagination: {
        el: ".s01-swiper .swiper-pagination",
        type: "progressbar",
    },
    breakpoints: {
        1281: {
            slidesPerView: 1,
            allowTouchMove: false,
        }
    }
})
const swiper02 = new Swiper(".s02-swiper", {
    slidesPerView: 3,
    spaceBetween: 20,                
})

 

두 개의 슬라이드가 각각 왼쪽과 오른쪽으로 정렬되어 있으며,

오른쪽의 박스들을 누르면 왼쪽 이미지가 바뀝니다.

뷰포트 사이즈가 줄어들면 하나의 슬라이더만 남아서 슬라이더가 변경되고,

모바일에서는 하나의 슬라이더만 남기기 때문에 필요 없는 슬라이더는 display: none 처리합니다..

구루미비즈 슬라이더

 

 

구루미비즈 슬라이더를 구현하기 위해 다음 코드를 추가했습니다:

const tabLinks = document.querySelectorAll('.s02-swiper .swiper-slide');
const tabContents = document.querySelectorAll('.s01-swiper .swiper-slide');

tabLinks.forEach(tabLink => {
    tabLink.addEventListener('click', () => {
    const tabId = tabLink.getAttribute('data-tab');

    tabContents.forEach(tabContent => {
        if (tabContent.id === tabId) {
        tabContent.style.display = 'block';
        } else {
        tabContent.style.display = 'none';
        }
    });

    tabLinks.forEach(link => {
        link.classList.remove('on');
    });
    tabLink.classList.add('on');
    });
});

 

 

CSS는 다음과 같이 작성했습니다:

.s02-swiper .on {
    display: none;
}

 

 

 

 

전체적인 코드는 코드펜에서 확인하세요.

 

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