[slick.js] slick 라이브러리 활용 슬라이드와 프로그래스 바

 

=== Prologue ===

 

웹사이트를 만들 때 주로 메인에 항상(필수적으로) 사용하게 되는 라이브러리가 있다.

바로 slick 라이브러리 🦄

메인에는 주로 슬라이드 기능을 쓰는데 그때마다 slick 라이브러리를 쓰게 된다. 

슬라이드는 똑같고, 거기에서 화살표나 프로그래스 바 등의 기능만 바뀌는 셈이다.

 

종종 서브페이지에서도 쓰곤 하는데 주로 과정이나 절차를 나타낼때 사용한다.   

 

==== Mission ====

 

오늘은 회사소개 홈페이지 만들 때 생산공정과정을 나타내기 위해서 작업했던 슬라이드와 프로그래스 바 템플릿을 공유하고자 한다. 

 

 

=== description ===

 

1. slick 홈페이지에서  CDN 또는 script로 가져온다. 

⭐ 제이쿼리 라이브러리이기 때문에 제이쿼리도 당연히 설치되어 있어야 한다.

홈페이지에만 가도 수많은 예제가 있어서 내가 원하는 템플릿을 고른 후에 아래에 나와있는 코드를 참고 삼아 작업을 해도 무방하다. 

slick - the last carousel you'll ever need

 

2. slick 라이브러리를 설치 했다면, 이제 할 일은 끝났다고 해도 된다. 

slick 함수를 써주고, 해당 옵션들을 설정해 주면 된다. 

 

실무에서 가장 많이 쓰는 것들의 옵션으로만 

예를 들어보자면!

var slideBox = $('.slideBox');
    slideBox.slick({ 
                        dots: true, //pagenation
                        arrows: true, //화살표 버튼
                        infinite: true,
                        speed: 300, //슬라이드 속도
                        slidesToShow: 3, //화면에 보여지는 슬라이드 수
                        slidesToScroll: 1, // 슬라이드 될때 몇개씩 될껀지
                        autoplay: true, // 자동슬라이드
                        autoplaySpeed: 5000, // 자동슬라이드 몇초마다 될건지
                        cssEase: 'linear',
                });

 

 

 

 

반응형

 

 

==== detail progress ====

 

자 그러면, 이제 코드펜을 연동해서 slick으로 만든 슬라이드와 프로그래스 바를 보자. 

반응형까지 함께 고려하였는데, 반응형일때 가장 중요한 것은 

⭐ variableWidth 를 true로 하냐, false로 하느냐에 따라서 내가 원하는 가로 사이즈가 되는지 마는지 결정된다.

 

See the Pen Slider Progress by bok-world (@bok-world) on CodePen.

 

 

혹시나 큰 화면을 원하시는 분들은 여기로 :-) 🐥

Slider Progress

 

 

==== Result ====

🌵 slick 슬라이드를 만드는것 보다 프로그래스 바를 만들 때 좀 고생을 했다. 1번에서 8번까지 가는 것은 상관없었지만, 8번에서 1번으로 갔을 때 색상들이 사라지는 게 너무 눈에 띄게 보여서 어색했다고 해야 하나. 

🌵 slick 에는 기본 내장되는 pagination 옵션기능이 있는데, 그 기능을 쓰게 되면 따로 클릭이벤트를 주지 않아도 돼서 편하지만, 위의 프로그래스 바처럼 before, after를 써야 할 때에는 ( 뭔가 기존에서 바꿔야 할게 많을 경우에는) 그냥 따로 구조를 잡아서 클릭이벤트를 만들어 주는 게 훨씬 편하다. 

🌵 슬릭슬라이드 이동하는 시간차와, 프로그래스 바 이동하는 시간차를 같게 해 줘야 자연스러운 움직임이 나타나 진다. 

🌵 슬릭슬라이드에는 기존 옵션에는 간격 기능이 없으므로, css로 알아서 margin 간격을 조정하자! 

 

 

==== You may also Like! ====

 

 

🧐 사이드 프로젝트 [월간 테크]가 무엇인지 궁금하다면?  

 

요주의 개발자, 쥬디

 

🧐 "앱 개발"을 위한 첫 단계가 무엇인지 궁금하다면? 

[사이드 프로젝트] 사이드 프로젝트 "앱개발" 첫 단계는 기획이다.

 

 

🧐 사이드프로젝트 [월간 테크 프로젝트] 스토리가 "더" 궁금하다면? 

 

[월간TECH프로젝트] 로블록스 "빨간마스크" 게임 제작기 1주차

 

==== Reference====

 

📌 직접 작성한 코드입니다 :-)