[Jquery]슬라이드 || carousel 라이브러리 Slick

이번에 알라딘 클론코딩을 진행하면서 슬라이더를 구현해야할 일이 많았다..!

 

Slick 라이브러리로 손쉽게 ㄱㄱ

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

 

 

위의 라이브러리로 구현한 것

 

1. 슬라이더 (카카오 도서 API로 받아온 데이터로 구성됨)

2. 버튼 커스터마이징

 

이 두 개가 가장 중요했다.

 

슬라이더의 기본 기능 중에 버튼이 있었지만

 

따로 클래스를 지정해서 css를 수정했다.

 

가장 헷갈렸던부분은...

API를 받아오는 함수와 Slick라이브러리 함수를 함께 사용했을 때..

 

슬라이더 구성을 위해 사용한 함수

저 위에 not('.slick-initialized) 함수 진짜 중요!!!!!!

저거 없으면 계속 에러 뜬다.

위와 이어지는 같은 함수

 

이렇게 함께 실행되도록 한 이유는

 

한번에 이루어지지 않으면 받아오는 속도의 차이 때문인지...

 

데이터가 받아와지면 Slick이 안되고, Slick이 되면 데이터 받아오는것에 오류가 났다.

 

 

그리고

 

hover함수를 이용해서 메뉴가 변경되는 구성일때는

 

아래와 같이 작성해야지 오류가 안났다..

 

오류나면 갑자기 모든 슬라이더들이 세로로 정렬된다;

 

이렇게 hover 함수가 실행될때! Slick 라이브러리가 적용되도록 구성했다.

 

사용해보고 느낀점 : 슬라이더가 한 개씩 보이는 것은 직접 구현하는 것이 편하지만

한 번에 여러개의 아이템이 이동되어야 할때는 Slick을 사용하는 것이 훨씬 편하다.

---

도움이 많이 된 블로그 글

 

https://programmer93.tistory.com/34

slick slider 사용법 및 옵션 (반응형 포함) - 삽질중인 개발자