웹개발에 자주 쓰는 자바스크립트 라이브러리들 - 슬라이드/갤러리 (Carousel)

슬라이드/갤러리 (Carousel)

01. 가장 유명한 Slick - https://kenwheeler.github.io/slick/

설치 

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

또는 Slick 자바스크립트, Slick CSS파일, jQuery파일 첨부가 필요합니다. 절대 jQuery 까먹지마세요!

홈페이지에서 다운받거나 위처럼 CDN 방식으로 첨부하시면 되겠습니다. 

02. Swiper - https://swiperjs.com/

설치

<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />




<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

swiper은 모바일에 특화되어 있고, 스와이프를 기본으로 지원하며 옵션이 굉장히 다양해 코드를 수정할 일 없이 옵션부여만으로 다양한 효과를 줄 수 있습니다. 

03. jcSlider - https://github.com/JoanClaret/jcSlider

CSS3 애니메이션을 기반으로 만들어졌으며 60여가지의 전환 효과를 간단하게 구현할 수 있습니다. 옵션은 굉장히 떨어지지만 In/Out 전환효과를 따로 줄 수 있기 때문에 화려한 슬라이드를 만들 수 있어요.

업데이트가 안된지 꽤 오래 되서 풀리퀘도 안받아주지만 화려한 효과가 필요하다면 선택해보세요~