CSS를 어떻게 할까 이리저리 만져보다가 Slider를 넣고 싶어져서 구글링하던 중 Swiper라는 Plugin을 찾아서 사용해 보았다.
https://swiperjs.com/get-started
헤더에 React 부분이 따로 구분되어 있어서 편리하다.
이제 사용할 Slider를 찾아서 Demos
를 클릭!
왼쪽 네비게이션과 우측 컨텐츠에 해당되는 Slider의 기능과 이름이 나온다.
기본적인 Slider도 좋지만 뭔가 3D느낌의 기능을 주고 싶다면 쭉~~내리다보면
Effect coverflosw
라는 슬라이더가 있다.
본인이 사용하는 프레임워크에 맞춰 눌러주자.
만약 Javascript
를 사용한다면 튜토리얼에서 확인하거나 구글링 하면 정보가 많이 나온다.
이제 저기서 React
를 들어가 보자.
그러면 요렇게 demo를 만들어 놓은 멋진 사이트에 들어가진다.
나머지는 볼 필요 없이 빨간색 박스에 있는 아이들만 눈여겨보자.
거두절미🦹🏻♀️하고 바로 필요한 코드만 작성해 본다.
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
// Swiper에서 가져올 모듈들
import { EffectCoverflow, Pagination } from "swiper";
function App() {
return (
<>
<Swiper
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
}}
pagination={true}
modules={[EffectCoverflow, Pagination]}
className="mySwiper"
>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</SwiperSlide>
</Swiper>
</>
);
}
import부분은 주석으로 대충 설명..ㅎ;
이제 중요한건 return
부분이다.
<Swiper>
= Swiper 기능을 사용할 곳에 부모로 감싸준다.
<SwiperSlide>
= Slide가 직접적으로 사용될 태그
EffectCoverflow 모듈(기능) 사용 예 )
1. import { EffectCoverflow } from "swiper"
2. Swiper 태그안에 modules{[EffectCoverflow]}에 추가.
3. 파라미터 확인 후 기능 추가
coverflowEffect={{
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
}}
그다음 css를 살펴보자.
이 3개가 필수로 들어가져 있다.
마음대로 커스텀해서 멋진 결과물을 만들어 보자.
끝!
이제 실전에서 써보자.
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Navigation,Mousewheel} from "swiper";
import로 필요한 모듈들을 가져오자.
Navigation
= 버튼으로 움직이는 모듈
Mousewheel
= 마우스 휠로 움직이는 모듈
<Swiper
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={4}
coverflowEffect={{
rotate: 10, // 회전각도
stretch: 0,
depth: 100, // 깊이감도
modifier: 2, //
slideShadows: true,//선택한 부분 밝게 나머지는 그늘지게 해준다.
}}
navigation={true} // 네비게이션 버튼
mousewheel={true} // 마우스 휠
modules={[EffectCoverflow,Navigation,Mousewheel]} // 모듈추가
className="mySwiper"
>
<div className="container">
{movies.map(movie =>
<SwiperSlide>
<Movie
id={movie.id}
key={movie.id}
poster_path={movie.poster_path}
title={movie.title}
average={movie.vote_average}
/> </SwiperSlide>)} </div>
</Swiper>
처음에 시행착오로 튜토리얼이랑 구글링 해보고 몇시간을 날렸는데 알고보니 자리배치가 정말로 중요했다.
SwiperSlide
를 movies.map
에서 리턴하는 곳에 넣어줘야 하나씩 가져오는 형식이었다.
코드는 끝! 지옥의 CSS를 꾸며보자.🙀
변경 전
변경 후
h4 {
color:#fff;
height: 19.5px;
margin: 5px 0px 5px;
overflow: hidden;
font-weight:lighter;
}
h4
는 영화 제목 부분이다.
height
로 간격을 정해주고 넘칠경우 overflow
를 사용하여 없애주게 하였다.
.poster{
-webkit-box-reflect: below 30px linear-gradient(transparent, rgba(0,0,0,0), rgba(0,0,0,0.3));
}
뭔가 조금더 입체적인 느낌을 주고싶어서 사용해 보았다.
below
로 밑으로 반사 시키고 영화제목과 별점이 잘 보이게 30px
만큼 띄워주었고, linear-gradient
로 투명하게 그라데이션을 주었다.
.swiper{
--swiper-theme-color:#fff;
}
파란색이 너무 보기 싫어서 개발자도구로 찾아서 바꿔놓았다.😶
#movie :hover{
background-color: #000;
opacity: 80%;
transition: all 1s;
}
영화 포스터에 마우스를 갔다대면 어둡게 해주는 hover
를 추가
Swiper가 다했다...😅 굿이에요 굿~~!