슬라이드 플러그인 Slick - API(2)

안녕하세요

찐망고입니다.

 

2021.08.02 - [마크업/플러그인] - 슬라이드 플러그인 Slick - API (1)

슬라이드 플러그인 Slick - API (1)

 

오늘은 slick-slider 관련 두 번째 포스팅입니다.

생각해보니 이전 글처럼 포스팅을 하면 slick글만 한 20개도 쓸 수 있을 것 같아요..ㅋ

 

오늘은 슬릭을 이용해서 이미지를 100% 넣는 방법에 대해서 알려드릴 거고요~

dots부분도 한번 건드려 보도록 하겠습니다.

 

https://codepen.io/jjinMangKo/pen/mdmjRXr

100% 기본 슬라이드

 

arrows는 css를 이용해서 위치를 잡아줬고..

어제 했던 것처럼 dots를 css를 이용해서 circle모양으로 만들어 주었습니다.

참고로 텍스트도 넣어봤어요..

주의하실 점이 있어 디테일하게 좀 뜯어보자면

 

slick-slider arrows

slick슬라이더의 arrows를 지정하면 저렇게 slick-slider기준으로 자식 요소인 button형태로 들어갑니다.

absolute로 각각 위치를 잡아줄 거라 그 부모인 slick-slider인 <div> 요소에 relative가 있는지  체크해봐야 해요

 

slick.css

 

기본적으로 slick.css를 걸면 자동으로 position: relative가 잡혀 있는 걸 확인할 수 있고요.

각 위치를 잡아준 뒤 이전 버튼인. slick-prev는 꼭 z-index값을 넣어주시는 게 좋습니다.

순서상 이전 버튼 + 슬라이드 이미지 + 다음 버튼이라 이미지들 때문에 이전 버튼이 가려지거든요..

먼가 레이어처럼 위장에 있는 애가 아래장 애를 가리는 거죠~ 

 

 

자, 그리고 이 슬라이드를 넘겨보다 보면

텍스트들이 자연스럽게 움직이는 게 보일 거예요!~

 

slick-slider의 slick-active

슬릭은 div안에 들어간 요소들을 slick-track안에 자식 요소로 넣어놓고

복제를 해서 무한으로 슬라이드가 돌아가게 하는 플러그인이거든요.. 

그래서 해당 슬라이드가 view에 보일 땐 각 div에 class로 slick-active가 자동으로 들어갑니다.

 

그 slick-active가 들어간 클래스에 텍스트 요소를 찾아서 css를 이용하여 animation을 주시면 됩니다.

저는 transition을 사용했어요.

머 간단히 transform을 이용하여 아래서 위로 올려주었습니다.

 

도트 모양도 넘버링으로 변경하려고 했는데 

그건 다음 포스팅으로 넘기겠습니다.

 

일부러 이러는 건 아니에요!

 

그럼 내일 만나요! ~