jQuery를 이용하여 슬라이드 애니메이션 만들기

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

그냥 그래

jQuery를 이용하여 슬라이드 애니메이션 만들기 본문

Web/JavaScript

jQuery를 이용하여 슬라이드 애니메이션 만들기

그냥사람임 2018. 6. 23. 02:35

최근 회사일 외로 여러가지 기업과 IC관계를 형성하면서 포스팅을 할 시간이 줄어서,

사실상 블로그를 안한다고 볼 수 있는데 오늘은 조금 짬도 나는 듯하여, 앞으로는 시간 날때마다

기억용도로 기록하고자 한다.

사이트 작업을 요즘들어 많이 하기 시작했는데, 이유는 즉슨 에이전시 쪽 개발 속도가 너무 느려서 일일히 세부적인 부분부터

사실상 레이아웃만 업체가 작업하고 디자인, 애니메이션, 각종 스타일은 모두 내가 일일히 짜고있다 -_-;;

알아두면 요긴하게 쓰이는 jQuery 라이브러리를 이용한 slick 애니메이션을 간단하게 구현하는 방법을 대충

코드만 공개해보겠다 대충은 보면 알거라 생각한다. (slick 자체가 어렵지 않아서.. )

기본적으로 필요한건 slick.css | slick.min.js | slick-theme.css 를 다운로드 후 external sheet로 load 해줘야하고

필수 lib으론 jQuery 정도가 있겠다.

https://github.com/kenwheeler/slick/

기본적인 사용 방법은 위의 해당 개발자 git을 참조하면 된다.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="slick.css"/>
		<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
		<style>
			#banner img{
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<div><img src="1.jpg"/></div>
			<div><img src="2.jpg"/></div>
			<div><img src="3.jpg"/></div>
			<div><img src="4.jpg"/></div>
			<div><img src="5.jpg"/></div>
		</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="slick.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#banner").slick({
				vertical: true,
				slidesToShow: 3,
				slidesToScroll: 1,
				autoplay: true,
				autoplaySpeed: 3000,
				arrows: false,
				verticalSwiping: true
			});
		});
	</script>
</html>

따로 src로 jquery를 들여와도 되지만 왠만해선 설치하고 내부에서 읽어오는 습관을 들이도록하는게 좋다.

디버깅 환경이 되었던, 로드속도가 되었던 src를 이용한 방법은 지저분할 뿐더러 별로 권고되지 않는다.