vertical sliding tab type(세로형 탭타입의 슬라이딩 배너)

Vertical Slide TabType

다음의 소스는 세로형 탭 형식의 슬라이딩 배너입니다.

HTML

다음의 마크업은 슬라이딩 배너에 사용되는 소스입니다.

html

<div class="slide-v">
	<ul class="tab">
		<li class="is-selected"><a href="#product-01">스포츠 포토</a></li>
		<li><a href="#product-02">패션 포토</a></li>
		<li><a href="#product-03">동물 포토</a></li>
	</ul>
	
	<div class="view-box">
		<ul class="list-wrap is-selected" id="product-01">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
		</ul>
		<ul class="list-wrap" id="product-02">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
		</ul>
		<ul class="list-wrap" id="product-03">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
		</ul>
	</div>
</div>

CSS

다음의 소스는 css 소스로 사용자 정의에 맞게 다시 정의하여 사용하기 바랍니다.

css

*{margin: 0;padding: 0;}
body {font-size: 12px;margin: 50px;}
li {list-style: none;}
.slide-v {margin-top: 30px}
.slide-v:after {clear: both; display:block; content:""}
.slide-v .tab {float: left; width: 122px;height: 114px;border: 1px solid #ccc; background-color: #e6e6e6;}
.slide-v .tab li a {display: inline-block;color: #333; text-decoration: none;padding: 7px 20px 8px 20px; margin: 2px 0; }
.slide-v .tab li.is-selected a {background-color: #aa7f5d; color: #fff;}
.slide-v .tab li:nth-child(1) a {margin-top: 12px;}
.slide-v .view-box {overflow: hidden;height: 115px;position: relative;margin-left: 150px;}
.slide-v .list-wrap {position: absolute;top: 0;left: 0;display: none;}
.slide-v .list-wrap.is-selected {display: block;}
.slide-v .list-wrap li {float: left;border: 1px solid #9b9b9b; width: 150px;height: 113px;text-align: center;margin-left: 10px;position: relative;}
.slide-v .list-wrap li:first-child {margin-left: 0;}
.slide-v .list-wrap li > a { display: table-cell; width: 226px;height: 117px;text-align: center;vertical-align: middle;font-size: 18px;}
.slide-v .list-wrap li.on > a{display: none;}

javaScript

아래는 소스설명(주석처리) 가미된 자바스크립트 소스입니다.

javascript

var JUI = JUI || {};

(function(param) {
	var global = param.global,
		$      = param.$;
	
	JUI.verticalSlide = function (container, options) {
		
		// 수직형 슬라이드를 사용되지 않는 페이지에서는 함수를 종료
		if (!container.length) {
			return;
		}
		
		var detect = {},
			config = {
				isSelected : 0,
				speed : 400
			},
			active = 'is-selected';
		
		$.extend(config, options);
		
		function init() {
			setup();
			isSelected();
		}
		
		function isSelected() {
			detect.tabListItem.removeClass(active);
			detect.viewContents.removeClass(active);
			detect.tabListItem.eq(config.isSelected).addClass(active);
			detect.viewContents.eq(config.isSelected).addClass(active);
		}
		
		function setup() {
			// 요소 탐색
			detect.tabContainer = container.find('.tab');
			detect.tabListItem = detect.tabContainer.find('li');
			detect.viewBox = container.find('.view-box');
			detect.viewContents = detect.viewBox.find('.list-wrap');
			
			// 탭 갯수
			detect.tabLength = detect.tabListItem.length;
			
			// 인덱스 최대갯수
			detect.max = detect.tabLength - 1;
			
			// 초기 인덱스 상태값 설정
			detect.currentIndex = config.isSelected;
			
			// 슬라이딩 콘텐츠 높이 값
			detect.height = detect.viewContents.height();
			
			// 탭 리스트 인덱스 설정
			detect.tabListItem.each(function (index) {
				$(this).find('a').data('index', index);
			});
			
		}
		
		function direction(selectedIndex) {
			// 기존 인덱스와 선택된 인덱스를 비교
			// 기존 인덱스 < 선택 인덱스 => goToUp 문자열 반환(아래에서 위로 보여줌)
			// 기존 인덱스 > 선택 인덱스 => goToDown 문자열 반환(아래에서 위로 보여줌)
			return detect.currentIndex < selectedIndex ? 'goToUp' : 'goToDown';
		}
		
		function slideStarting(selectedIndex, speed) {
			
			// 현재 인덱스와 다음 인덱스, 즉 클릭한 요소가 현재 인덱스와 같거나 클릭한 인덱스가 총 인덱스보다 크다면 슬라이딩을 하지 않도록 멈춘다.
			if ((detect.currentIndex == selectedIndex) || (selectedIndex > detect.max)) {
				return;
			}
			
			// 애니메이션 요소가 애니메이션 중이라면 큐에 쌓이지 않도록 함수를 종료하도록 리턴하여 실행을 멈춘다.
			if (detect.viewContents.is(':animated')) {
				return;
			}
			
			var position = direction(selectedIndex);
			var offset;
			
			switch(position) {
				case 'goToUp' :
					offset = detect.height;
					break;
				case 'goToDown' :
					offset = -detect.height;
			}
			
			// 선택한 인덱스 요소의 위치를 위, 아래로 보이지 않는 위치에 놓았다가 애니메이션으로 정위치에 정렬
			// 선택한 인덱스가 기존 인덱스보다 크다면 아래(양수값)에서 위로 애니메이션 처리하고,
			// 선택한 인덱스가 기존 인덱스보다 작다면 위(음수)에서 아래로 애니메이션 처리한다.
			detect.viewContents.eq(selectedIndex).css({'top': offset}).addClass(active);
			detect.viewContents.eq(selectedIndex).animate({'top' : 0}, speed);
			
			// 기존 인덱스 요소는 애니메이션 되는 인덱스에 따라 양수,음수값을 가지게 된다.
			// 다시 말해, 애니메이션 중인 인덱스가 기존 인덱스보다 크다면 기존 인덱스 요소는 위(음수값)로 올라가야 되며
			// 애니메이션 인덱스가 기존 인덱스보다 작다면 애니메이션 영역은 위에서 아래로 나오면서
			// 기존 인덱스 영역은 현위치에서 아래(양수값)로 표현되야 한다.
			// 애니메이션 중인 인덱스의 양수,음수에 따라 기존 인덱스는 항상 반대 양수,음수값을 가지도록 한다.
			detect.viewContents.eq(detect.currentIndex).animate({'top': -offset}, speed, function () {
				slideEnding(selectedIndex);
				
			});
			
		}
		
		function slideEnding(selectedIndex) {
			
			// 기존 인덱스 요소의 탭, 콘텐츠 비활성화
			detect.tabListItem.eq(detect.currentIndex).removeClass(active);
			detect.viewContents.eq(detect.currentIndex).removeClass(active);
			
			// 클릭한 탭 활성화
			detect.tabListItem.eq(selectedIndex).addClass(active);
			
			// 애니메이션이 끝난 후 소스상의 인라인 스타일을 제거
			detect.viewContents.removeAttr('style');
			
			// 슬라이딩이 종료될 때마다 애니메이션된 인덱스를 현재 인덱스로 업데이트한다.
			// 즉, 현재 인덱스는 애니메이션이 일어날 때마다 기존 인덱스 역할을 하게 된다.
			detect.currentIndex = selectedIndex;
		}
		
		init();
		
		detect.tabListItem.on('click.banner', ' > a', function () {
			// 클릭한 인덱스 인자 전달
			slideStarting($(this).data('index'), config.speed);
			return false;
		});
		
	};
	
}({global: window, $: window.jQuery}));

$(function () {
	/**
	 * @param1 필수, @param2 옵션
	 * @param1 @type $('selector') :슬라이더 컨테이너 박스
	 * @ppram2 @type {} : 객체리터럴
	 * {isSelected:0, speed: 400} : 처음 활성화시켜놓을 요소, 애니메이션 속도
	 * ex) JUI.verticalSlide($('.slide-v'), {isSelected: 1, speed: 400});
	 **/
	JUI.verticalSlide($('.slide-v'));
});

Overview

필자 슬라이딩 배너 모음 링크

1. 슬라이딩 페이드 효과(재생,정지)
2. 세로형 탭타입의 슬라이딩 배너
3. ffff

Jaehee's WebClub