https://www.guamplay.com/include/js/swipejs/swiper.addon.js?ver=1791445334

1/*
2	# Swiper.js를 이용한 슬라이드 메뉴 :: 2017-11-16 LDD
3	구조
4		<div class="js_test_menu">
5			<ul>
6				<li>1</li>
7				<li class="hit">2</li>
8				<li>3</li>
9			</ul>
10		</div>
11	ele: .js_test_menu (아이디로도 사용 가능)
12	active: {
13		class: '.active', // 히트(액티브)요소 클래스 또는 아이디(.active or #active)
14		speed: 500, // 히트(액티브)요소까지 이동 속도(0이면 효과 없음)
15		position: 'left' // left일 경우 무조건 왼쪽이 히트 요소가 나오고 center면 정가운데에 히트 요소가 나옴
16	}
17	예제:
18		var SwiperJSMenu = new SwiperJSMenu('.js_topmenu', {class:'.hit', speed:1000, position:'center'});
19		SwiperJSMenu.action();
20
21	active 변경에 따라 슬라이드 위치 변경:
22		var SwiperJSMenu = new SwiperJSMenu('.js_topmenu', {class:'.hit', speed:1000, position:'center'});
23		SwiperJSMenu.action();
24		$('.js_topmenu').find('.hit').removeClass('hit');
25		$('.js_topmenu').find('li:eq(3)').addClass('hit');
26		SwiperJSMenu.moveUpdate();
27
28	2차가공(슬라이드 위치 변경):
29		var SwiperJSMenu = new SwiperJSMenu('.js_topmenu', {class:'.hit', speed:1000, position:'center'});
30		SwiperJSMenu.action();
31		SwiperJSMenu.swiper().setWrapperTransition(1000);
32		SwiperJSMenu.swiper().setWrapperTranslate(-350);
33		이런식으로 swiper.js의 옵션으로 2차 가공 가능
34*/
35(function($) {
36	var SwiperJSMenu = function(ele, active) {
37		if(typeof(Swiper) != 'function') return {'error':'swiper.js를 먼저 호출 하세요.'};
38		this._swiper;
39		this.ele = ele;
40		this.rand = Math.floor(Math.random()*100000)+1; // 난수 발생
41		this.defaultClass = 'js_swiper_menu_'; // 기본 클래스 접두사
42		this.itemClass = this.defaultClass+'item_'+this.rand; // 슬라이드 아이템 클래스 추가
43		this.wrapClass = this.defaultClass+'wrap_'+this.rand; // ul의 클래스
44		this.prevClass = this.defaultClass+'prev_'+this.rand; // prev class
45		this.nextClass = this.defaultClass+'next_'+this.rand; // next class
46		this.activeClass = this.defaultClass+'active_'+this.rand; // active class
47		this._width = 0; // 전체 크기 초기값
48		this.active = active;
49		if(this.active['hit_class'] == undefined) this.active['hit_class'] = '.active';
50		if(this.active['speed'] == undefined) this.active['speed'] = 300;
51		if(this.active['position'] == undefined) this.active['position'] = 'center';
52		if(this.active['margin_right'] == undefined) this.active['margin_right'] = 1;
53		if(this.active['auto_height'] == undefined) this.active['auto_height'] = false;
54		return this._swiper;
55	}
56	SwiperJSMenu.prototype = {
57		action: function() {
58			var ua = window.navigator.userAgent.toLowerCase();
59            var safari = (ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0);
60			var s = this;
61			var _ele = s.ele;
62			$(_ele).find('li').addClass(s.itemClass); // ele 내부의 li에 슬라이드를 위한 클래스 추가
63			$(_ele).find('ul').addClass(s.wrapClass);
64			$.each($(_ele+' li'), function(k, v) {
65				s._width += (safari?Math.ceil($(_ele+' li').eq(k).width()*1)+10:Math.ceil($(_ele+' li').eq(k).outerWidth(true)*1));
66			}); // 전체 크기값 계산
67			$(_ele).find('ul').css({
68				'width': s._width+this.active['margin_right']
69			}); // 전체 크기를 ul에 적용
70			$(_ele).css({
71				'overflow': 'hidden'
72			}); // ele에 기본 css적용
73			if(s._width <= $(_ele).width()) {
74				if(s._swiper) {
75					s.destroy();
76					return;
77				}
78				else {
79					s.destroy();
80					return;
81				}
82			}
83			s._swiper = new Swiper(_ele, {
84				freeMode: true,
85				slidesPerView: 'auto',
86				spaceBetween: 0,
87				autoHeight: this.active['auto_height'],
88				speed: (s.active['speed'] == undefined?100:s.active['speed']),
89				wrapperClass: s.wrapClass,
90				slideClass: s.itemClass,
91				slidePrevClass: s.prevClass,
92				slideNextClass: s.nextClass,
93				slideActiveClass: s.activeClass
94			});
95			s._swiper.updateSlidesSize(s._width+this.active['margin_right']);
96			s.moveUpdate();
97		},
98		destroy: function() {
99			var s = this;
100			var _ele = s.ele;
101			var ele = $(_ele);
102
103			// 요소의 기본 클래스 제거
104			ele.removeClass('swiper-container-horizontal').removeClass('swiper-container-free-mode').removeClass('swiper-container-android').removeAttr('style');
105

106			// 스와이퍼를 위한 클래스 제거
107			if(ele.find('.'+s.wrapClass)) ele.find('.'+s.wrapClass).removeClass(s.wrapClass).removeAttr('style');
108			if(ele.find('.'+s.itemClass)) ele.find('.'+s.itemClass).removeClass(s.itemClass);
109			if(ele.find('.'+s.wrapClass)) ele.find('.'+s.wrapClass).removeClass(s.wrapClass);
110			if(ele.find('.'+s.prevClass)) ele.find('.'+s.prevClass).removeClass(s.prevClass);
111			if(ele.find('.'+s.nextClass)) ele.find('.'+s.nextClass).removeClass(s.nextClass);
112			if(ele.find('.'+s.activeClass)) ele.find('.'+s.activeClass).removeClass(s.activeClass);
113
114			if(s._swiper) {
115				s._swiper.destroy();
116				s._swiper = null;
117			}
118		},
119		moveUpdate: function() {
120			var s = this;
121			var _ele = s.ele;
122
123			// active된 요소로 이동
124			if($(_ele).find(s.active['hit_class']).length > 0) {
125				var scrollOffset = ($(_ele).find(s.active['hit_class'])[0].offsetLeft *-1)+($(window).width()/2)-($(_ele).find(s.active['hit_class']).width()/2);
126				if(scrollOffset > 0) scrollOffset = 0;
127				var residual = 0; // active기준으로 잔여 width(active의 절반 크기 포함)
128				$.each($(_ele+' li'), function(k, v) { // active기준으로 잔여 width(active의 절반 크기 포함)
129					if(k == $(_ele).find(s.active['hit_class']).index()) residual += ($(this).width()/2);
130					else if(k > $(_ele).find(s.active['hit_class']).index()) residual += $(this).width();
131				});
132				if(($(_ele).width()/2) > residual) scrollOffset = ($(_ele+' ul').width()-$(_ele).width())*-1; // active 요소가 스크롤 가능 영역 이상으로 스크롤 되지 않도록
133				if(s.active['position'] == 'left') {
134					s._swiper.slideTo($(_ele).find(s.active['hit_class']).index(), s.active['speed']);
135					scrollOffset = $(_ele).find(s.active['hit_class'])[0].offsetLeft*-1;
136				}
137				else { // active요소를 정중앙정렬 한다.
138					if(typeof s._swiper == 'object') {
139						s._swiper.setWrapperTransition(s.active['speed']);
140						s._swiper.setWrapperTranslate(scrollOffset);
141					}
142				}
143				this.residual_value = residual;
144				this.scrollOffset_value = scrollOffset;
145			}
146			else { return; }
147		},
148		swiper: function() {
149			return this._swiper;
150		}
151	}
152	window.SwiperJSMenu = SwiperJSMenu;
153})(jQuery);
154
155/*===========================
156Swiper AMD Export
157===========================*/
158if (typeof(module) !== 'undefined')
159{
160    module.exports = window.SwiperJSMenu;
161}
162else if (typeof define === 'function' && define.amd) {
163    define([], function () {
164        'use strict';
165        return window.SwiperJSMenu;
166    });
167}