우선 SwiperJs는 홈페이지에 흔히 쓰이는 캐러셀을 편하게 만들어줄 수 있는 자바스크립트 라이브러리다.
HTML, CSS, JS 짜기 전에 SwiperJS 홈페이지 들어가서 본인이 편한 방식으로 cdn 코드를 불러오면 된다.
HTML
< div class = "section" >
< div class = "swiper" >
< div class = "swiper-wrapper" >
< div class = "swiper-slide" >
< div class = "inner" >
< div class = "title" >
< p > slide1제목 </ p >
</ div >
< div class = "photo" >
< p > 사진1 </ p >
</ div >
</ div >
</ div >
< div class = "swiper-slide" >
< div class = "inner" >
< div class = "title" >
< p > slide2제목 </ p >
</ div >
< div class = "photo" >
< p > 사진2 </ p >
</ div >
</ div >
</ div >
< div class = "swiper-slide" >
< div class = "inner" >
< div class = "title" >
< p > slide3제목 </ p >
</ div >
< div class = "photo" >
< p > 사진3 </ p >
</ div >
</ div >
</ div >
</ div >
< div class = "swiper-pagination" >
</ div >
</ div >
</ div >
SwiperJs를 성공적으로 불러왔다면 html의 클래스명을 정해진대로 써야 제대로 작동한다.
우선 section이라는 큰 div안에 본격적으로 swiper를 짠다.
무.조.건 swiper 안에 swiper-wrapper를 넣고 그 안에 swiper-slide를 넣어야한다.
swiper-slide가 실질적으로 슬라이드되는 큰 틀이라고 보면 된다.
swiper-slide안에 본인이 원하는대로 꾸며준다.
그리고 swiper-wrapper 바깥 쪽에 swiper-pagination을 넣어주면 페이지를 나타내는 원이 바로 나타난다.
CSS
.section {
height : 100vh ;
}
.swiper {
height : 100% ;
}
.swiper-slide {
display : flex ;
align-items : center ;
justify-content : center ;
}
.inner {
padding-left : 400px ;
width : 100% ;
height : 100% ;
display : flex ;
align-items : center ;
}
.title {
font-size : 100px ;
opacity : 0 ;
transform-origin : -200% center ;
animation : title-ani-out 1s forwards ;
}
.photo {
width : 500px ;
height : 300px ;
box-shadow : 4px 4px 40px 0px rgba ( 0 , 0 , 0 , .7 );
display : flex ;
align-items : center ;
justify-content : center ;
margin-left : 100px ;
opacity : 0 ;
transform-origin : 200% center ;
animation : photo-ani-out 1s forwards ;
}
.swiper-slide-active .title {
animation : title-ani-in 1s forwards ;
}
.swiper-slide-active .photo {
animation : photo-ani-in 1s forwards ;
}
@keyframes title-ani-in {
0%{
opacity : 0 ;
transform : translateX ( -200px );
transform : rotate ( -25deg );
}
100%{
opacity : 1 ;
transform : translateX ( 0px );
transform : rotate ( 0deg );
}
}
@keyframes photo-ani-in {
0%{
opacity : 0 ;
transform : translateX ( 200px );
transform : rotate ( 25deg );
}
100%{
opacity : 1 ;
transform : translateX ( 0px );
transform : rotate ( 0deg );
}
}
@keyframes title-ani-out {
0%{
opacity : 1 ;
transform : translateX ( 0 );
transform : rotate ( 0 );
}
100%{
opacity : 0 ;
transform : translateX ( 200px );
transform : rotate ( 25deg );
}
}
@keyframes photo-ani-out {
0%{
opacity : 1 ;
transform : translateX ( 0 );
transform : rotate ( 0 );
}
100%{
opacity : 0 ;
transform : translateX ( -200px );
transform : rotate ( -25deg );
}
}
.swiper-pagination-bullet {
background : transparent ;
color : #999 ;
position : relative ;
opacity : 1 ;
}
.swiper-pagination-bullet:first-child::before {
position : absolute ;
content : 'slide1' ;
font-size : 40px ;
right : 0 ;
}
.swiper-pagination-bullet:nth-child ( 2 ) ::before {
position : absolute ;
content : 'slide2' ;
font-size : 40px ;
right : 0 ;
margin-top : 30px ;
}
.swiper-pagination-bullet:last-child::before {
position : absolute ;
content : 'slide3' ;
font-size : 40px ;
right : 0 ;
margin-top : 60px ;
}
.swiper-pagination-bullet-active {
color : black ;
}
section과 swiper의 height값을 설정해주고 inner의 내용도 원하는대로 꾸며준다.
inner내용 중에 transform-origin 이라는 것이 있는데 이건 회전축을 바꿔주는 코드이다.
그리고 애니메이션 코드 마지막에 forwards를 붙여주면 마지막 100%의 상태를 유지해준다.
애니메이션은 축을 기준으로 위아래로 돌아가게끔 만들어준다.
DevTools(F12, 검사)를 찍어보면 내가 작성하지 않은 class명들이 활성화된 것을 발견할 수 있다. 예를 들어 swiper 페이지가 활성화되었을 때 클래스명이 -active가 붙는 것을 확인할 수 있다. 이렇게 변화가 생길 때마다 클래스명이 바뀌는 것을 확인해서 각각의 요소들을 조작해주면 된다.
따라서 active의 애니메이션과 활성화되지 않은 div의 애니메이션을 따로 만들어서 넣어준다.
페이지네이션도 마찬가지로 before태그로 글자를 만들어주고 active되었을 때도 따로 조작해준다.
JAVASCRIPT
const swiper = new Swiper ( '.swiper' , {
speed : 400 ,
mousewheel : true ,
direction : 'vertical' ,
loop : true ,
pagination : {
el : '.swiper-pagination' ,
clickable : true
},
effect : 'fade' ,
});
자바스크립트는 상당히 간단한데, mousewheel 을 true로 해주면 swiper div안에서 마우스휠로 조작이 가능하다. direction 은 초기값이 horizontal로 좌우로 움직이고 이를 vertical로 상하로 바꾸어준다. loop 는 시작, 마지막 슬라이드가 되어도 무한으로 복사해주어 무한 슬라이드가 가능하게 만들어준다. pagination 은 html에 div만 넣으면 가능한게 아닌 자바스크립트 코드도 넣어줘야 활성화가 된다. 마지막으로 swiper자체에 effect 를 넣어줘야 자연스러운 애니메이션이 가능하다.
