swiper effect) fade와 slide동시에 구현하기

 

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

오래간만에 swiper 관련 포스팅을 하네요.

생각보다 고민을 많이 한 코드라 공유하고자 같이 포스팅해봅니다 

 

클론 한 사이트는 노보셀바이오입니다.

http://novocellbio.com/

노보셀바이오

 

노보셀바이오 탭 슬라이드

 

 

탭을 누르면 fade효과가 적용되는 탭형태의 슬라이드입니다.

 

기존 웹사이트는 owl플러그인을 사용했는데요

저는 그거 안 쓰고 싶으니까요..

<div class="con-box">
    <div class="left-box">
        <div class="swiper tab-slider">
          <ul class="tech-tab swiper-wrapper">
            <li class="swiper-slide swiper-slide tab-btn tab1 active">
                <button type="button">저분자 아미노산</button>
            </li>
            <li class="swiper-slide tab-btn tab2">
                <button type="button">탁월한 배양기술</button>
            </li>
            <li class="swiper-slide tab-btn tab3">
                <button type="button">고품질 세포치료제</button>
            </li>
            <li class="swiper-slide tab-btn tab4">
                <button type="button">암세포 사멸 능력</button>
            </li>
            <li class="swiper-slide tab-btn tab5">
                <button type="button">종양 억제 효과</button>
            </li>
        </ul>
        </div>
    </div>
    <div class="swiper tech-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">...</div>
            <div class="swiper-slide">...</div>
            <div class="swiper-slide">...</div>
            <div class="swiper-slide">...</div>
            <div class="swiper-slide">...</div>
        </div>
    </div>                        
</div>

 

탭 부분과 콘텐츠 부분을 각각 swiper로 만들어 줄 거예요.

원래 탭 부분을 swiper-pagination으로도 만들어보기도 하고,  swiper 없이 작업하여 연결도 해보았는데

가장 매끄럽고 오류가 없으려면 둘 다 swiper로 작업하는 게 가장 좋더라고요.

(물론 내가 코드를 이상하게 짠 걸 수도...)

 

그리고 또 하나의 포인트는 fade효과를 CSS로 만들어줄 거예요

그나마 가장 오류가 덜 나는 방향으로다가 생각한 방법입니다.

/* tab-slider 레이아웃 */
.tab-slider {
    width: 100%;
}
.tech-tab {
    flex-direction: column;
}

/* fade-in, fade-out 애니메이션 */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.3s forwards;
  }
  
  .fade-out {
    opacity: 1;
    animation: fadeOut 0.3s forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

 

 

버튼과 콘텐츠 모두 swiper로 연결시켜준 후 

슬라이드가 바뀔 때마다 관련된 탭 버튼으로 연결시켜 주는 코드와

탭 버튼을 눌렀을 때 fade처리가 되게 js를 추가해 줍니다.

// 탭 슬라이더 설정
const tabSwiper = new Swiper('.tab-slider', {
    slidesPerView: 'auto',  // 탭 슬라이더 자동 크기 설정
});

// 콘텐츠 슬라이더 설정
const techSwiper = new Swiper('.tech-slider', {
    effect: 'slide',
    loop: false, // 무한 반복 비활성화
    on: {
        slideChange: function () {
            const realIndex = techSwiper.realIndex;  // 실제 슬라이드 인덱스
            document.querySelectorAll('.tab-btn').forEach((tab, index) => {
                if (index === realIndex) {
                	tab.classList.add('active');
                } else {
                	tab.classList.remove('active');
                }
            });
        },
    },
});

// fade 효과를 위한 CSS 클래스 추가 및 제거
function fadeInOutContent(index) {
    const currentSlide = document.querySelector('.tech-slider .swiper-slide-active');
    const nextSlide = document.querySelectorAll('.tech-slider .swiper-slide')[index];

    // 현재 슬라이드에 fade-out 클래스 추가
    currentSlide.classList.add('fade-out');

    // 100ms 후에 해당 슬라이드를 변경하고 fade-in 처리
    setTimeout(() => {
      techSwiper.slideTo(index, 0); // 슬라이드를 즉시 이동
      nextSlide.classList.add('fade-in');

      // fade-in 완료 후 fade-out 클래스 제거
      setTimeout(() => {
        nextSlide.classList.remove('fade-in');
        currentSlide.classList.remove('fade-out');
      }, 100); // fade-in 효과 시간과 일치
	}, 100); // fade-out 효과 시간과 일치
}

// 탭 클릭 시 fade 효과 적용
document.querySelectorAll('.tab-btn').forEach((tab, index) => {
    tab.addEventListener('click', function () {
        // 현재 활성화된 버튼과 동일한 버튼을 클릭한 경우에는 fade 처리하지 않음
        if (!tab.classList.contains('active')) {
            fadeInOutContent(index);  // 탭 클릭 시 fade 효과 적용
        }
    });
});

 

 

아래 코드펜에서 슬라이드를 확인해 보세요.

 

See the Pen swiper fade버튼과 slide효과 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

다음 포스팅은 무한슬라이드로 가져와볼게요~

 

무한슬라이드 포스팅 링크입니다!~

swiper 무한슬라이드와 버튼 fade효과