slick.js - http://kenwheeler.github.io/slick/ 참고

◆ slick.js

화면 슬라이드를 스크립트로 직접 구현하지 않고 쉽게 구현할 수 있도록 해주는 슬라이드 라이브러리이다.

▶ 연동

<link rel="stylesheet" type="text/css"
	href="http://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css"
	href="http://kenwheeler.github.io/slick/slick/slick-theme.css" />
<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"
	integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
	crossorigin="anonymous"></script>
<script type="text/javascript"
	src="http://kenwheeler.github.io/slick/slick/slick.min.js"></script>

▶ 사용

• html

<div class="your-class">
	<div>
		<img src="/image/test1.jpg" alt="">
	</div>
	<div>
		<img src="/image/test2.jpg" alt="">
	</div>
	<div>
		<img src="/image/test3.jpg" alt="">
	</div>
	<div>
		<img src="/image/test4.jpg" alt="">
	</div>
</div>

• script

$(document).ready(function() {
	$('.your-class').slick({
		autoplay : true,
		dots : true, /* 하단 점 버튼 */
		speed : 300 /* 이미지가 슬라이딩시 걸리는 시간 */,
		infinite : true,
		autoplaySpeed : 30000 /* 이미지가 다른 이미지로 넘어 갈때의 텀 */,
		arrows : true,
		slidesToShow : 1,
		slidesToScroll : 1,
		touchMove : true, /* 마우스 클릭으로 끌어서 슬라이딩 가능여부 */
		nextArrows : true, /* 넥스트버튼 */
		/* prevArrows : true,
		arrow : true, */
		fade : false
	});
});

=> 이 외에 다양한 옵션은 홈페이지에서 확인할 수 있다!

EX

---