쇼핑몰의 배너를 구현하며 하나의 이미지만 사용하는 것은 너무 정적으로 느껴져 여러 개의 이미지를 활용하여 이미지 슬라이드 형식(Carousel)으로 구현해보려고 한다.
이렇게 이미지 슬라이더 형식을 도입하면 사용자들에게 더 다채로운 시각적 경험을 제공할 수 있을 것이다.
📌 React-slick VS Swiper
위의 두 개 모두 React에서 사용할 수 있는 캐러셀 라이브러리이다.
크게 2가지 측면에서 비교해보면 다음과 같다.
1. 기능 및 확장성
React Slick: 간단한 사용법과 다양한 옵션을 제공하지만 더 많은 고급 기능이 필요한 경우 제한적Swiper: 다양한 터치 제스처, 반응형 디자인, 루프, 플립, 그룹화 등 더 많은 확장성과 고급 기능 제공
2. 사용성
React Slick: 간단하고 직관적인 사용법을 제공하여 초보자에게 적합Swiper: 고급 기능들을 제공해 초기 설정이 조금 복잡할 수 있으나 다양한 옵션을 통해 사용자 정의 및 확장 가능
React Slick의 사용법이 간단하지만 터치 제스처와 반응형을 추가하고 싶기 때문에 싸커마켓의 캐러셀은 Swiper를 이용해 구현해보려고한다.
📌 Swiper
🌐 공식 문서 : https://swiperjs.com/react#use-swiper-slide
🔷 설치
먼저 아래 명령어를 이용해 Swiper 라이브러리를 설치해준다.
npm i swiper🔷 사용
공식 문서를 바탕으로 이제 필요한 것들을 이용해 구현하면 된다.
배너의 넣을 이미지를 한 개씩 <SwiperSlide />로 감싸주었다.
그리고 <SwiperSlide />들을 <Swiper />로 감싸주면된다.
마지막으로 <Swiper />에 사용하고자 하는 옵션들을 각 형식에 맞게 추가하면 된다.
import React from 'react'
import styled from 'styled-components'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import './Banner.css'
import Img1 from '../../assets/BannerImg/1.jpg'
import Img10 from '../../assets/BannerImg/10.jpg'
const Banner = () => {
return (
<BannerWrap>
<Swiper
modules={[Navigation, Pagination, Autoplay]}
slidesPerView={1}
navigation
loop={true}
pagination={{ clickable: true }}
autoplay={{ delay: 5000 }}
>
<SwiperSlide>
<SBanner src={Img1} alt='Tottenham'/>
</SwiperSlide>
// ... 중략
<SwiperSlide>
<SBanner src={Img10} alt='RealMadrid'/>
</SwiperSlide>
</Swiper>
</BannerWrap>
)
}
export default Banner
내가 사용한 옵션들을 해석해보면 다음과 같다.
-
slidesPerView={1}
:보여지는 슬라이드 수설정 -
navigation
: Swiper의이전/다음 버튼활성화 -
loop={true}
:마지막 슬라이드에서처음 슬라이드로이동가능할 수 있도록 함 -
pagination={{ clickable: true }}
:페이징(점)을 활성화하고 사용자가 페이징을클릭가능하도록 함 -
autoplay={{ delay: 5000 }}
:자동으로 슬라이드 재생 하는시간설정
❗구현하다가 마주친 오류
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';코드를 다 맞게 입력했지만 화면에 적용되지 않아 왜 그런지 이유를 찾아보았었는데
알고보니 위에 저 3줄을 import해주지 않아서 발생한 오류였다.
사용하는 옵션에 맞는 swiper CSS들을 꼭 import 하시길 바란다.
🔷 스타일 수정
위에 방법대로 캐러셀은 잘 구현했지만 디자인이 마음에 들지 않았다.
스타일을 수정하기 위해서는 CSS를 수정해주어야된다.
Components 폴더에 따로 Banner 폴더를 만들어 구현하고 있었기 때문에 Banner 폴더 안에 스타일 수정을 위한 Banner.css 파일을 만들어 주었다.
그리고 수정하고 싶은 부분은 개발자도구(F12)를 이용해 선택해 클래스명을 파악한 뒤 내가 원하는 스타일대로 수정해주었다.
사용하고 싶던 버튼 SVG 파일이 있어서 background-image를 이용해 원하던대로 바꾸어주었다.
그리고 페이징도 현재 페이징이 좀 더 눈에 띌 수 있도록 수정해주었다.
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
}
.swiper-button-prev,
.swiper-button-next {
width: 70px;
height: 100px;
top: 215px;
background-image: url('../../assets/swiper-left.svg');
}
.swiper-button-prev {
left: 30px;
}
.swiper-button-next {
right: 30px;
background-image: url('../../assets/swiper-right.svg');
}
.swiper-button-prev:hover {
background-image: url('../../assets/swiper-hover-left.svg');
}
.swiper-button-next:hover {
background-image: url('../../assets/swiper-hover-right.svg');
}
.swiper-pagination {
margin-bottom: 15px;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
cursor: pointer;
transition: transform 0.5s;
background-color: white;
}
.swiper-pagination-bullet-active {
background-color: white;
opacity: .8;
scale: 1.3;
}
❗구현하다가 마주친 오류
처음에 swiper-button-prev 과 .swiper-button-next 를 아무리 수정해도 기본 디자인인 파란색 화살표가 도저히 바뀌지 않았다.
이것저것 다 해봐도 도저히 안바뀌어서 다시 개발자 도구로 코드를 자세히 봤더니 기본 화살표는 swiper-button-prev , .swiper-button-next 클래스들의 가상 요소 ::after로 코딩되어있었다.
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
}그래서 초기화 해주었더니 기본 화살표가 사라지고 내가 원하는대로 다시 버튼을 구현할 수 있었다.
다른 분들은 나같은 실수 하지않기를 바라며,,,
🔷 구현 화면
