[js][splide]이미지슬라이드 라이브러리

여러 이미지를 간편하게 슬라이드 뷰로 볼 수 있는 라이브러리가 필요했다.

여러 개 검색해본 결과, 가벼운 로딩과 다양한 유저 경험을 제공할 수 있는 라이브러리가 적합하여

splide를 선택하게 되었다.

 

splide는 이미지를 여러 view로 볼 수 있도록 한다.

한 화면에 여러 개의 이미지라든가, Grid형식의 슬라이드, 동영상 첨부, 자동 슬라이드 넘기기 등 제공한다.

 

 

위 사진은 splide 사이트에 있는 이미지이며, 프로젝트에는 위와 같이 썸네일과 슬라이드가 동시에 보이도록 적용했다.

 

아래는 적용한 간단한 예시 코드로 HTML 부분과 Javascrip 부분이다.

main슬라이드와 thumbnail슬라이드 두부분으로 구성하여 sync하여 구성하였다.

 

 

 

splide 자세한 설명과 내용은 아래 사이트를 참고하기 바랍니다.

https://splidejs.com/

Splide - The lightweight, flexible and accessible slider/carousel