dltjdgur327

jquery 플러그인 중에 굉장히 유용하게 사용한 플러그인을 소개하려고 합니다.

바로 slick 이라는 플러그인인데요.

http://kenwheeler.github.io/slick/

사이트에 들어가면 사용방법을 친절하게 설명해주고 있습니다. 물론 영어지만요...

여기에서 slick을 다운로드 해줍니다. Download Now!!

다운받은 slick 폴더를 사용하려고 하는 프로젝트에 붙여넣어주세요

저는 WebContent 아래에 붙여넣었습니다. 그리고 기본적인 index.jsp 에서 테스트를 진행해보았습니다.

다운받은 slick 폴더 안에는 css파일과 js파일이 있습니다.

!!! 여기서 경로는 파일위치에 맞게 변경하여 사용해주세요.

그리고 jquery를 통해 원하는 옵션을 설정하여 실행시켜주면 됩니다.

dots는 아래의 점을 표시하는 옵션이고

infinite는 루프 무한대로하는 옵션이라고 보시면 됩니다.

<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">

	<div class="your-class" align="center" style="width: 500px; left: 600px;">
		<div><h3>1</h3></div>
		<div><h3>2</h3></div>
		<div><h3>3</h3></div>
		<div><h3>4</h3></div>
	</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('.your-class').slick({
		dots: true,
		infinite: true
	});
});
</script>

전체적인 내용입니다. div 태그안에 원하는 내용을 넣어주시면 slick을 사용하실 수 있습니다.

slick의 옵션의 종류가 많기 때문에 원하는 옵션은 직접 사용해보시고 입맛대로 추가하시면 되겠습니다.

war 파일도 함께 첨부하겠습니다.

slick.war

궁금하신 사항은 댓글 부탁드리겠습니다!