[5] 열정도 쭈꾸미, Carousel 을 적용해보자

배경

---

메뉴의 상세 정보 모달을 띄우게 되면 대표 이미지가 나오게 된다. 이때, 다양한 사진을 제공하는게 좋을 것 같아 Carousel 을 적용해 보려고 한다.

 

어떤걸 쓸까?

---

1. 직접구현
2. Swiper

우선은 문서화가 잘되어 있고 배우기 편하고 설치가 간단한 Swiper 를 대중적으로 많이 사용하는 것 같은 분위기처럼 보인다. 마음 같아서는 직접 구현하면서 공부하고 싶지만 나에게 그런 시간은 존재하지 않는다... 얼른 이 프로젝트를 끝내고 싸피에 집중해야할 것 같다.

 

또한, 좀 찾아보니 구글링을 좀만 하더라도 대부분 Swiper 얘기를 하는거보니 대세인것 같다. 나는 대세를 따르겠다.

 

Swiper

---

https://swiperjs.com/get-started

Swiper - The Most Modern Mobile Touch Slider

 

공식문서

 

$ npm install swiper

 

우선 swiper 를 설치한다.

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

const swiper = new Swiper(...);

 

swiper 는 위와 같이 선언해 사용가능하다. 다시 해보면 알겠지만 위 코드로는 뭔가가 애매하다는 것을 알 수 있다.

 

하지만, 공식문서에 나온 방법으로는 먼가 잘 안되서 Swiper 제작팀이 만든 데모 페이지를 통해 솔루션을 얻을 수 있게 되었다.

How to?

---

import React, { useRef, useState } from "react";

// Import Swiper React components

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles

import "swiper/css";

import "./styles.css";

export default function App() {
  return (
    <>
      <Swiper className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

 

8개의 슬라이드를 출력하는 데모 코드다. Swiper 컴포넌트의 mySwiper 는 Swiper 에서 제공하는 기본 css 파일에 있는 클래스 인 것 같다. ./styles.css 에는 존재하지 않아 그렇게 보인다.

 

이 코드만 적용하게 된다면 잘 움직이는 캐러셀이 만들어진다! 두둥

 

하지만, 나는 밑에 있잖아 그거 인덱스마다 동그라미 움직이는거 먼지알지?? 그거 하고 싶어요@ 찾아보니까 Paging 이라는 속성이 있었다! 적용하기 위해 위의 코드를 살짝쿵 수정해보았다.

import "swiper/css";
import 'swiper/css/pagination';
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination} from 'swiper/modules';

    <Swiper pagination={true} modules={[Pagination]} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

 

이렇게 하면 예쁜 캐러셀이 만들어집니다~

 

https://swiperjs.com/demos#navigation

Swiper Demos

 

데모는 여기서 확인하면 이해하기 쉽게 리액트, 뷰 등 코드를 제공하니 꼭 둘러보라

결과물

---

쏘 굿~

 

아직은 이미지가 더 없어 추가하지 못했고, 캐러셀에 이미지를 리스트화해서 넣어야 하는데 메인 화면 코드가 상당히 지저분해서 조금 고민을 한 후 수정을 해야할 것 같다.. 이런..