(HTML / CSS / javascript / jQuery) slick 슬라이더 dots 페이지 버튼에 각자 다른 글씨 삽입하기.

slick.js

See the Pen slick dots custom -2 by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/QWbLZGy

slick dots custom -2

slick 슬라이더 플러그인을 사용하여 슬라이더를 구현 후 dots, 즉 페이지 버튼 각각에 글자들을 삽입하려면 보통

 

자바스크립트로 slick 함수 안에서 customPaging 을 사용하여 넣습니다. 여기서 i 를 이용하여 1부터

 

쭉 나열하기는 쉽지만 각각 전혀 다른 글자로 이루어져 있다면 어떻게 해야하나 생각해봤습니다.

 

html 에 요소를 직접 넣어주고 그 요소들에 각각의  다른 글자들을 직접 써주고 그 요소들을 자바스크립트로

 

불러와서 해결했습니다. slick 슬라이더에서 페이지 버튼을 꾸밀 때 유용하게 사용가능할 것 같습니다.