[REACT] Swiper 사용하여 터치슬라이드 구현하기

좌 <-> 우 로 카테고리 이동 및 터치슬라이드를 구현해야 하는 상황이였는데 

라이브러리 사용없이 처음부터 구현하고 싶었지만 아직 내실력으론 무리,, 였ㄸㅏ;,,

 

여러 라이브러리가 많았지만 나는 Swiper 으로 구현해보기로 하였다 !

 

🔆 Swiper 설치

npm install swiper

🔆 Swiper 예시 코드

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Mousewheel, Keyboard } from 'swiper';

import 'swiper/css';
import 'swiper/css/pagination';


function () {
  return (
    <Swiper
      direction={'vertical'} // 슬라이드의 방향을 설정합니다. ( "vertical"/"horizontal" )
      pagination={{ clickable: true }} // dots를 클릭했을 때, 클릭한 슬라이드로 이동하게 됩니다.
      mousewheel // 마우스 휠 동작을 허용합니다.
      keyboard // 키보드 방향키에 의한 동작을 허용합니다.
      modules={[Pagination, Mousewheel, Keyboard]} // 페이지네이션, 마우스휠, 키보드 등을 사용하려면 모듈을 import해줘야 합니다.
      allowTouchMove // 터치 동작을 허용합니다.
      className="main_slider"
      threshold={20} // 터치 감도를 조정합니다. 숫자가 클수록 터치에 반응하지 않습니다.
      speed={1000} // 슬라이드가 넘어가는 속도를 조정합니다. 단위는 ms입니다.
      onActiveIndexChange={(swiper) => {
        console.log(swiper.activeIndex);
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>
  );
}


export default;

 

위 코드에서는 기본적으로 필요한 옵션들만 설정했습니다. 옵션이 굉장히 많이 있기 때문에 Swiper 공식문서에서 옵션들을 찾아보는 것을 권장드립니다.

 

🔆 구현 코드

import { Pagination, Keyboard } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import styled from "styled-components";

import { MENU_LIST, PAGE_LIST } from "datas/main";

const Main = () => {
  return (
    <Container>
      <CustomSwiper
        pagination={{
          clickable: true,
          el: ".swiper-pagination",
          renderBullet: function (index, className) {
            return (
              '<span class="' + className + '">' + PAGE_LIST[index] + "</span>"
            );
          },
        }}
        modules={[Pagination, Keyboard]}
        keyboard
        speed={1000}
        loop={true}
      >
        {MENU_LIST.map(({ id, menu }) => (
          <CustomSwiperSlide key={id}>{menu}</CustomSwiperSlide>
        ))}
        <div className="swiper-pagination" />
      </CustomSwiper>
    </Container>
  );
};

const Container = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-height: 900px;
`;
const CustomSwiper = styled(Swiper)`
  .swiper-pagination {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    background-color: lightgreen;
    width: 425px;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    .swiper-pagination-bullet {
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      color: #000;
    }
    .swiper-pagination-bullet-active {
      color: #fff;
    }
  }
`;
const CustomSwiperSlide = styled(SwiperSlide)`
  margin-top: 40px;
`;

export default Main;

 

🐥 완성 ..! 🐥

 

web에서는 터치로 이동이 힘들기에 keyboard 방향키로 이동할수 있게 하였다.

 

+ 모바일로는 터치 슬라이드가 가능했다! (뿌듯❤️)