[slick] slick slider 슬릭 슬라이더

slick slider 슬릭 슬라이더 

---

 

slick slider : 반응형 웹을 지원하는 슬라이더 라이브러리 

 

슬릭 슬라이더는 전체 width 값에 따라 breakpoint 옵션을 사용해서

슬라이드를 n개씩 보이게 설정할 수 있다. 

 

 

 

slick slider 사용법 

자세한 옵션은 slick의 https://github.com/kenwheeler/slick/ 여기서 확인 가능하다. 

<script>
$('.slider').slick({
		dots: false,  //스크롤바 아래 점으로 페이지네이션 여부 
		infinite: true, //무한 반복 옵션 
		speed: 300, //다음 버튼을 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
		slidesToShow: 5, //한 화면에 보여질 컨텐츠 개수 
		slidesToScroll: 1, // 스크롤 한번에 움직일 컨텐츠 개수 
		autoplay: false, // 자동 스크롤 사용 여부 
		autoplaySpeed: 2000, //자동 스크롤 시 다음으로 넘어가는데 걸리는 시간(ms)
		responsive: [{ //반응형 웹 구현 옵션 (위에 옵션은 default값) 
			breakpoint: 1400, //화면사이즈 1400px 
			settings: { 
				slidesToShow: 5,
				slidesToScroll: 1
			}
		}, {
			breakpoint: 1020,
			settings: {
				slidesToShow: 4,
				slidesToScroll: 1
			}
		},{
			breakpoint: 765,
				settings: {
					slidesToShow:3,
					slidesToScroll:1
			}
		}]
});
</script>

 

 

적용된 화면 

slick slider가 적용이 되면 아래와 같은 화면이 나온다. 

breakpoint에 따라서 출력되는 화면의 개수가 다르다.