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

안녕하세요 

찐망고입니다.

slick slider 세 번째 포스팅이네요..

 

오늘은 slick API 중 customPaging 이용하여 dots의 모양을 numbering모양으로

변경해 보겠습니다.

 

제가 요즘 insta도 시작하고

youtube준비도 해야 하고

수업도 하고 있어서 

매일매일 포스팅이 너무 힘듭니다. 

어휴 

제가 원래 계획 없이 무리해서 일을 저지르는 스타일이라.. 

그래도 좋은 내용으로 포스팅하게 노력해보겠습니다 

 

수업 중에는 이렇게 슬라이더를 일일이 하나씩 예제 삼아 하진 않고요.

선생님 이 슬라이드가 만들고 싶습니다!라고 하면

그냥 똑같이 만듭니다 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

자 코드 펜을 가봐야죠?

 

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

slick-dots -> customPaging

 

오늘은 slick-slider에 슬라이더가 하나가 아니라 여러 개로 보이게 했고

slick-dots의 모양을 숫자 형태로 변경해 보았습니다.

 

슬라이드 이미지 개수부터 볼까요?

일단 추가로 코드를 적어놓은 게 

slidesToShow부분에 3이 들어가 있고,

slidesToScroll부분엔 1이 들어가 있습니다.

슬라이더를 움직여보면 알겠지만 slidesToShow부분은 슬라이드 이미지가 보이는 숫자 구여

slidesToScroll은 슬라이더를 움직일 때 지나가는 이미지의 개수라고 보시면 됩니다.

참 쉽죠?

autoplay는 자동이고 autoplaySpeed는 자동으로 넘어가는 시간이고요

2000은 2천 밀리 초라 2초를 뜻합니다 ㅎㅎ

 

자 dots로 넘어가 볼게요

그림을 보면 세 개의 형태의 그림과 블릿 대신 숫자가 보시시죠?

저 숫자는 여러분이 원하는 어떤 형태의 text로도 가능하고

물론 이미지로도 가능합니다 그건 아마 다음 포스팅에서 할 것 같기도 하고요..ㅎㅎ

 

slick-slider API를 보면 customPaging이 있어요.

직접 이름을 지정하여 매개변수로 사용하여 값을 받을 수 있는데 

여기서 두 번째로 나오는 index부분이 내가 작업한 슬라이드의 개수의 위치 순서? 를 받는 값이라고 생각하시면 됩니다.

이름은 모 index든 i든 편한 이름으로 받으시면 되고요

참고로 스크립트에서 index값이란 배열의 위치를 가리키는 숫자를 이야기하는데요..

흑 배열도 설명해야 할 거 같으므로 그건 제가 자바스크립트 포스팅을 따로 하도록 하겠습니다.

ㅎㅎㅎ

여하튼 index값의 시작 번호는 0번부터 시작인데..

기본적으로 우리는 1번부터 사용하니까 변수를 선언하여 index에 더하기 1을 해 준 값을 따로 받았습니다

변수 선언도 var 말고 const와 let이 있어요..

음..

그것도 다음 포스팅에 제가 차차..

(할게 너무 많네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 현타 옴 제가 이걸 왜 시작했을까요.. 전 온라인 강의하는 사람도 아닌데..)

 

<li>요소안에 이쁘게 들어간<span>요소들

 

슬라이드 개수만큼 <li> 요소가 생성되었고, 그 안에 제가 지정한 <span> 요소들이 각각의 숫자를 달고 

하나씩 나오고 있습니다. ㅎㅎ

 

각 <li> 요소에 class로 slick-active가 따라다니고 있죠?

그걸 보고 제가 따로 css도 지정해서 color와 font-weight속성도 지정했습니다 

 

참 쉽죠?

 

다음 포스팅은 블릿의 모양을 이미지로 변경해보거나,

스크롤바를 넣어볼 예정입니다 

잘 따라오세요..😊