[NextJs] NextJs에 Swiper 적용하기

 NextJs+Typescript 환경에서 Swiper를 사용해보자!

 

https://mingmeng030.tistory.com/270

[NextJs] NextJs+Typescript로 프로젝트 시작하기

설치

https://swiperjs.com/get-started

npm install swiper

yarn add swiper

 

import 

import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Scrollbar, A11y } from "swiper";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/scrollbar";

 

Swiper component 작성

import { useRef } from "react";
// 사용할 모듈 import
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Scrollbar } from "swiper";

// 최신 버전인 경우
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/scrollbar";

// 구 버전인 경우
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/scrollbar/scrollbar.min.css';

import * as type from "./types";

export default function MovieSwiper({
  dataList,
  spaceBetween,
  slidesPerView,
}: type.MovieSwiperProps) {

  SwiperCore.use([Navigation]);
  const swiperRef = useRef<SwiperCore>();

  return (
    <div>
      <Swiper
        onSwiper={(swiper) => {
          swiperRef.current = swiper;
        }}
        modules={[Navigation, Scrollbar]} //사용할 모듈
        spaceBetween={spaceBetween} // 슬라이드 간격
        slidesPerView={slidesPerView} // 화면에 보여줄 슬라이드 갯수
        loop={true} //슬라이드 무한 반복 여부
        autoplay={false} //슬라이드 자동 재생 여부
        navigation // prev, next button 적용
        scrollbar={{ draggable: true }}
      >
        {dataList?.map((item, i) => {
          return (
            <SwiperSlide>
              <Link href={{...}}>
                <img src={"..."} />
              </Link>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
}

 

Swiper component를 적용한 Home component

import MovieSwiper from "../components/MovieSwiper";
import * as type from "./types";

export default function Home({...}: type.homeProps) {
  ...
  return (
    <div>
      <MovieSwiper
        dataList={list1}
        title={title1}
        spaceBetween={0}
        slidesPerView={6}
      ></MovieSwiper>
      <MovieSwiper
        dataList={list2}
        title={title2}
        spaceBetween={0}
        slidesPerView={6}
      ></MovieSwiper>
    </div>
  );
}

swiper button 변경

- nextJs는 global.css에 작성해주면 잘 적용된다.

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

.swiper-button-prev {
  background: url(변경할 화살표 이미지) no-repeat;
}
.swiper-button-next {
  background: url(변경할 화살표 이미지) no-repeat;
}'
//투명도 및 크기 조정
.swiper-button-prev,
.swiper-button-next {
  opacity: 0.7;
  background-size: 70% auto;
  background-position: center;
}

적용 화면