[jQuery] 슬라이더 배너 만드는 방법

구글에서 슬라이더 배너 플러그인을 찾아보면 셀수 없이 많은 소스들이 나온다. 하지만 정작 만들어 사용할 수 있는 사람은 소수인 것을 감안하면 만드는 법 하나정도는 정리해 둬도 괜찮다는 생각이 든다.

 

슬라이더 배너를 만들기 위해 아래 과정대로 작업을 진행하려고 한다.

1. HTML 및 Style 구조잡기2. 좌우버튼을 생성하여 배너 이동시키기

 

1. HTML 및 Style 구조 잡기

 

슬라이드 배너의 핵심은 주황, 노랑, 초록색 영역이다.

 

<div id="banner_container" style="width:102px;height:58px;overflow:hidden;position:relative;">
	<div id="banner_wrapper" style="width:408px;position:absolute;"> 
		<img src="네모.jpg" style="width:100px;border:solid 1px;float:left;" />
		<img src="동그라미.jpg" style="width:100px;border:solid 1px;float:left;" />
		<img src="별.jpg" style="width:100px;border:solid 1px;float:left;" />
		<img src="세모.jpg" style="width:100px;border:solid 1px;float:left;" /> 
	</div>
</div>

 

 

초록색 영역은 <img> 들이 된다.

실제 노출될 배너들을 의미한다. 이미지들을 일렬로 나열하기 위해 float:left를 사용했고 넓이는 100px에 선을 1px씩 좌우로 넣어서 배너 하나당 넓이는 102px가 된다. 

 

주황색 영역은 banner_wrapper 가 된다. 

배너들을 감싸고 있는 영역이고 Wrapper라고 부른다. 초록영역의 이미지가 각 102px씩 4개를 가지고 있어서 넓이는 408px로 지정한다. 넓이가 408보다 줄어들면 이미지가 아래로 떨어지게 되니 넓이계산이 중요하다. position:absolute 를 설정한다. 좌우로 배너를 움직이기 위해서 위치에 대한 지정이 필요하다.

 

노랑색 영역은 banner_container 가 된다. 

배너가 노출될 영역을 지정한다. 배너 하나당 넓이가 102px이므로 노랑색 영역의 넓이는 102px로 지정하고 높이는 58px로 지정한다. overflow:hidden 속성을 추가한다. overflow:hidden 속성이 존재하지 않으면 모든 이미지가 화면에 노출된다. 또한 노랑색넓이는 102px 이하로 설정하면 이미지가 짤려서 노출되고 102px보다 크게 설정하면 옆에 있는 이미지까지 노출됨으로 크기 계산에 신중해야 한다. position:relative를 설정하여 banner_wrapper의 기준을 잡아준다.

 

 

2. 좌우버튼을 생성하여 배너 이동시키기

 

<div id="banner_navi">
	<img id="btn_left" src="좌.png" style="width:50px;" />
	<img id="btn_right" src="우.png" style="width:50px;" />
</div>

 

 

 

 

좌우버튼을 만들어주었으면 이제 좌우버튼에 대한 이벤트를 생성한다.

<script type="text/javascript">
	$(document).ready(function () {
		$("#btn_left").on("click", function () {
			$("#banner_wrapper").stop();
			("#banner_wrapper").animate({left: -103}, 1000);}
		);
		
		$("#btn_right").on("click", function () {
			$("#banner_wrapper").stop();
			$("#banner_wrapper").animate({left: 103}, 1000);}
		);
	});
</script>

• 왼쪽버튼인 btn_left를 클릭하면 banner_wrapper의 left값을 -102px 옮겨주고
• 우측버튼인 btn_right를 클릭하면 left값을 +102px 시켜준다.

 

정상적으로 동작한다고는 보기 어렵지만 배너를 이동시키는 프로토타입은 완성되었다.

 

배너가 돌아가는 원리는 익혔으니 이제 이것을 완성시켜나가보자.

1. 배너가 움직이려면 left값을 변경해야 하는데 left값을 계산하려면 배너의 위치를 알아야한다. 배너의 위치를 저장하는 변수를 하나 만들자 >>> BANNER_INDEX
2. 배너의 넓이는 언제든지 변할 수 있으니 배너의 넓이를 정의하는 변수를 하나 만들자 >>> BANNER_WIDTH
3. 사용자의 요청에 따라 배너의 개수가 변할 수 있으니 배너의 개수를 정의하는 밴수를 하나 만들자 >>> BANNER_LEN

var BANNER_INDEX = 1;
var BANNER_LEN = 0;
var BANNER_WIDTH = 102;

 

필요한 변수를 만들었으니 좌우 이동버튼을 다시 정의해 보자

$("#btn_left").on("click", function(){
	var nIndex = BANNER_INDEX-1;
	if(nIndex<0)
	nIndex=BANNER_LEN-1; 
	// n번째 배너 보이기.
	showBannerAt(nIndex);
});

$("#btn_right").on("click", function(){
	// 이동할 이전 배너 인덱스 값 구하기.
	var nIndex=BANNER_INDEX+1;
	if(nIndex>=BANNER_LEN)
		nIndex = 0; 
		// n번째 배너 보이기.
	showBannerAt(nIndex);
});

 

• btn_left를 누루면 BANNER_INDEX-1 을 하여 showBannerAt(nIndex) 함수를 실행한다.
• btn_right를 누루면 BANNER_INDEX+1 을 하여 showBannerAt(nIndex) 함수를 실행한다.

function showBannerAt(nIndex){ 
	if (nIndex != BANNER_INDEX) { 
		// n번째 배너 위치 값 구하기. 
		var nPosition = -BANNER_WIDTH * nIndex;
		// 슬라이드 시작. 
		$("#banner_wrapper").stop(); 
		$("#banner_wrapper").animate({ left: nPosition }, 200);
		 //현재 배너 인덱스 업데이트 시키기.
		BANNENR_INDEX = nIndex;
	}
}

 

이제 여기까지의 결과물을 한번 보자.

 

• 동작하는 스크립트입니다. 버튼을 눌러보세요

 

그런데 마음에 안드는 점이 있다. 맨 처음에서 좌측으로 이동시키면 스크롤이 뱅글돌아서 끝으로 이동하고 맨 끝에서 다시 우측으로 이동시키면 뱅글 돌아서 처음으로 돌아온다. 이제 이것을 무한 롤링으로 바꿔보자

 

3. 롤링 배너로 변경하기 

무한 롤링의 구조를 가져가는 방법에는 여러가지가 있는데 여기서는 앞뒤로 엘레먼트를 추가해서 돌리는 방식을 선택하도록 하겠다.

 

<div id="banner_container" style="width:102px;height:58px;overflow:hidden;position:relative;">
	<div id="banner_wrapper" style="width:612px;position:absolute;">
		<img src="세모.png" style="width:100px;border:solid 1px;float:left;" />
		<img src="네모.png" class="page" style="width:100px;border:solid 1px;float:left;" />
		<img src="동그라미.png" class="page" style="width:100px;border:solid 1px;float:left;" />
		<img src="별.png" class="page" style="width:100px;border:solid 1px;float:left;" />
		<img src="세모.png" class="page" style="width:100px;border:solid 1px;float:left;" />
		<img src="네모.png" style="width:100px;border:solid 1px;float:left;" />
	</div>
</div>

 

위에서 만든 배너의 순서는 아래와 같은데, 각 앞뒤에 엘레먼트를 추가한다.

• 변경 전
  1. 네모
  2. 동그라미
  3. 별
  4. 세모
• 변경 후
  1. 세모
  2. 네모
  3. 동그라미 
  4. 별
  5. 세모
  6. 네모

 

기존 배너는 ④세모에서 오른쪽 버튼을 누루면 ①네모를 보여주기 위해 화면을 돌렸어야 했다. 하지만 이제 ④세모에서 ⓑ네모를 보여주기위해 화면을 돌리지 않아도 된다. 단지 기존 로직과 같이 한 칸 더 이동하면 해결된다. 그리고 이제부터가 중요하다. 배너가 ⓑ네모로 도착하는 순간 배너의 위치를 바꾸야한다. ⓑ네모로 화면이 돌아가는 애니메이션이 끝나는 순간 ①네모로 화면을 바꿔버려야한다. 그러면 계속 돌아가는 배너를 만들 수 있다.

 

• 동작하는 스크립트입니다. 버튼을 눌러보세요

 

 

 

4. 전체 코드입니다.

 

여기까지 무리없이 따라 오신 분들을 위해 전체 코드를 보여드립니다.

<script type="text/javascript">
	var BN_INDEX = 1;
	var BN_LEN = 0;
	var BN_WIDTH = 102;
	$(document).ready(function () {
		bnInit();
		$("#btn_l").on("click", function () {
			var nIndex = BN_INDEX - 1;
			// n번째 배너 보이기.
			showBanner(nIndex);
		});

		$("#btn_r").on("click", function () {
			// 이동할 이전 배너 인덱스 값 구하기. 					
			var nIndex = BN_INDEX + 1;
			// n번째 배너 보이기. 					
			showBanner(nIndex);
		});
	});

	// nIndex에 해당하는 배너 보이기. 			
	function showBanner(nIndex) {
		if (nIndex != BN_INDEX) {
			//  n번째 배너 위치 값 구하기. 					
			var nPosition = -BN_WIDTH * nIndex;
			// 배너 메뉴의 위치 값을 업데이트 시킴. 					
			//showBannerDotAt(nIndex); 					 					
			// 슬라이드 시작. 					
			$("#bn_wrapper").stop();
			$("#bn_wrapper").animate({left: nPosition}, 200, function () {
				// 이전 내용이 없는 경우 마지막 배너 인덱스 값으로 설정하기. 						
				if (nIndex < 1) {
					nIndex = BN_LEN;
					nPosition = -BN_WIDTH * nIndex;
					$("#bn_wrapper").css({"left": nPosition + "px"});
				}
				// 다음 내용이 없는 경우, 첫 번째 배너 인덱스 값으로 설정하기. 				
				if (nIndex > BN_LEN) {
					nIndex = 1;
					nPosition = -BN_WIDTH * nIndex;
					$("#bn_wrapper").css({"left": nPosition + "px"});
				}
				//현재 배너 인덱스 업데이트 시키기. 						
				BN_INDEX = nIndex;
			});
		}
	}

	function bnInit() {
		BN_LEN = $("#bn_wrapper .page").length;
		$("#bn_wrapper").css({"left": -BN_WIDTH});
	} 
</script>

<div id="bn_container" style="width: 102px; height: 58px; overflow: hidden; position: relative;">
	<div id="bn_wrapper" style="width: 612px; position: absolute;">
		<img
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/27790A4B5321342A0E" /> 
		<img class="page"
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/2217B84B5321342A01" /> 
		<img class="page"
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/247D834B5321342A33" /> 
		<img class="page"
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/2303724B5321342A0A" /> 
		<img class="page"
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/27790A4B5321342A0E" /> 
		<img
			style="width: 100px; border: solid 1px; float: left;"
			src="https://t1.daumcdn.net/cfile/tistory/2217B84B5321342A01" />
	</div>
</div>
<div id="banner_navi">
	<img id="btn_l" style="width: 50px;" src="https://t1.daumcdn.net/cfile/tistory/2514893A532150CD0E" /> 
	<img id="btn_r" style="width: 50px;" src="https://t1.daumcdn.net/cfile/tistory/2540C33A532150CE2E" />
</div>

 

3. 추가 진행 작업

여기까지는 CSS의 left 값을 변경하는 것만으로 슬라이더 배너를 만들었다. 

다음에 할 일들은

① 화면터치를 이용하여 스크롤을 넘기는 작업

② left값을 변경하여 화면을 넘기는 것이 아닌 CSS3의 transform : translate3d를 사용하여 스크롤을 하는 작업

③ jQuery plugin으로 만드는 작업이 필요하다.

 

각 

①, ②, ③ 단계들은 정리할 분량이 많아 Chapter로 나누어 정리하도록 하겠다.