HOME화면에 Discography 섹션에 이미지 슬라이더를 안 만들어놓아서 swiper 라이브러리를 이용해서 구현하기로 했다. 이전에 팀플할 때 한 번 사용해본 적이 있어서 좀 더 친근했기에 시간상 바로 swiper를 이용해보기로 결정했다.
Swiper 최신버전 10.0.1 버전을 다운받아 swiper/react를 쓰려고 했으나, 향후 지원이 안 된다는 문구를 보고 이들이 안내해주는대로 web components로 넘어갔다.
스크롤 내리면서 web components 문서 읽고있었는데 이젠 또 React 18버전에서는 완전하게 지원은 안된다고... 아니 이보쇼들!!
결국 swiper를 다운그레이드(9.3.2)해서 swiper/react를 쓰기로 했다.
yarn을 이용해서 라이브러리 다운그레이드하는 방법은 (1.0.0으로 다운그레이드하고싶다면)
yarn upgrade package이름@^1.0.0
이미지 슬라이더는 화면에 펼치지는 모양에 따라 고유의 이름을 가지고 있다. 여러 방법들 중, 책이나 앨범의 커버이미지를 펼쳐서 넘겨보는 느낌의 coverflowEffect가 가장 마음에 들어서 해당 방법에 autoplay 기능을 더해 보여주기로 했다.
예시 코드는 Swiper 공식문서에서 사용하는 라이브러리별로 code sandbox를 연동해 보여준다.
보고 잘 따라한다면 크게 어려움은 없는 부분인데, 홈페이지 내에 예제코드가 있을 거라고 생각하고 code sandbox로 연동되는 버튼을 클릭하지 않아 시간이 좀 걸렸다ㅠㅠ
주의해야 할 점은, Swiper나 SwiperSlide의 이름 바꾸지 말고 import해온 그대로 사용할 것!!
그 외엔 오늘은 특별히 어려운 부분은 없었던 것 같다!
구현한 코드^__^
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import { Autoplay, EffectCoverflow } from 'swiper';
function Discography() {
return (
<>
<Swiper
effect={'coverflow'}
grabCursor={true}
centeredSlides={true}
slidesPerView={3}
coverflowEffect={{
rotate: 50,
stretch: 10,
depth: 150,
modifier: 1,
slideShadows: false,
}}
loop={true}
modules={[EffectCoverflow, Autoplay]}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
>참고사이트: React TypeScript 환경에서 Swiper 사용하기(image slider library)by sohee-k
