IceCraft - 메인페이지swiper 슬라이드 추가하기

 

[Feat #277] - 메인페이지 노래맞추기 게임 visual영역 슬라이드 추가, 버튼 추가 by seokachu · Pull Request

프로젝트를 시작하면서 기획때부터 게임을 2개 만들기로 했었지만 마피아 게임이 변수가 많았던 관계로(...)

아직 노래맞추기 게임은 시작을 못했지만 노래맞추기 게임은 서비스 준비중이라는 내용을 만들고 싶어서

메인페이지에 slide를 추가하기 위해 그나마 실무에서 자주 썼었고, 익숙했던 슬라이드 라이브러리 swiper을 추가하게 되었다.

슬라이드 라이브러리를 swiper로 선택한 이유는 모바일 버전에서 자동으로 터치 슬라이드를 지원이 가능하다는점

반응형 지원, 그리고 공식문서가 자세히 나와있다는점, 데모버전에 자세하게 나와있어 쉽고 편하게 지원할 수 있다는 점이 마음에 들어 선택하게 되었다.

 

공식문서 Docs

https://swiperjs.com/get-started

 

swiper에서는 상황에 따라 많은 데모버전이 나와있어 손쉽게 추가할 수 있다는 점인데

둘러보던 중 fade 효과와 parallax효과가 제일 마음에 들어서 두개를 합쳐 메인페이지 슬라이드 효과를 추가하게 되었다.

 

 

공식문서에 나와있는대로 swiper을 설치한 뒤

내가 추가하고싶은 효과를 import해서 불러왔다

import { EffectFade, Parallax, Autoplay, Pagination, Navigation } from "swiper/modules";

 

 

그리고 메인페이지에 데모버전과 공식문서를 참고하여 swiper 슬라이드 효과를 추가하게 되었다

 <Swiper
          className={S.gameList}
          pagination={{
            type: "fraction"
          }}
          rewind={true}
          effect={"fade"}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false
          }}
          navigation={true}
          speed={800}
          parallax={true}
          modules={[EffectFade, Parallax, Autoplay, Pagination, Navigation]}
          onSwiper={(swiper) => {
            swiperRef.current = swiper;
          }}
        >
          <SwiperSlide className={S.gameImage}>
            <div
              className={S.gameTitle}
              data-swiper-parallax="-100%"
              onMouseEnter={mouseEnterHandler}
              onMouseLeave={mouseLeaveHandler}
            >
              <h2>
                <Image src={MafiaGameTitle} alt="mafia game title" priority />
              </h2>
              <div className={S.gameButton}>
                <button onClick={gameStartHandler}>Game Start</button>
                <Link href="/mafiainfo" className={S.gameInfo}>
                  More Info
                </Link>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className={S.gameImage}>
            <div
              className={S.gameTitle}
              data-swiper-parallax="200%"
              onMouseEnter={mouseEnterHandler}
              onMouseLeave={mouseLeaveHandler}
            >
              <h2>
                <Image src={SongGameTitle} alt="song game title" priority />
              </h2>
              <div className={S.gameButton}>
                <button onClick={songHandler}>Game Start</button>
                <button onClick={songHandler} className={S.gameInfo}>
                  More Info
                </button>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>

 

 

 

 

 

 

그리고 사용자가 해당 슬라이드를 보고있을때 자동으로 슬라이드가 넘어가면 UX적으로 불편해서

해당 슬라이드에 마우스를 대고있으면 다음 슬라이드로 이동하지 않게 이벤트를 추가하였다.

  const mouseEnterHandler = () => {
    if (swiperRef.current) {
      swiperRef.current.autoplay.stop();
    }
  };

  const mouseLeaveHandler = () => {
    if (swiperRef.current) {
      swiperRef.current.autoplay.start();
    }
  };

 

 

 

 

 

결과창

 

메인페이지가 훨씬 세련되어짐~!

열심히 해둔 보람이 있다 ㅎ_ㅎ

 

 

 

 

swiper 라이브러리 트러블슈팅

슬라이드에 fade효과를 줘서 autoplay로 자동 슬라이드를 진행할 수 있게 설정했었는데
처음에만 자동슬라이드가 되는데 마지막 슬라이드로 될때 다시 첫번째 슬라이드로 가야하는데 autoplay가 작동하지 않았다.
왜 안되는지 계속 찾아보다가 구글링 해보니 같은 이슈를 겪고있으신 분들이 있어서 참고하게 되었다.

라이브러리 슬라이드 이슈였음 ㅠㅠ
생각보다 간단하게 해결! 공식문서에는 css를 import 할때 

import "swiper/css";

 

 

swiper/css를 불러오라고 했는데 나와 같은 오류를 겪고있는 분들 내용을 보니

import "swiper/css/bundle";

swiper/css/bundle을 import해야 오류가 해결된다고 함

 

 

트러블슈팅 참고링크
https://stackoverflow.com/questions/74315304/autoplay-stops-after-1-fade-when-using-fade-effect-in-swiper-js
https://swiperjs.com/swiper-api#css-styles