[plugin] Swiper 현재 액션 값 담기

검색창에 추천 검색을 롤링으로 넣었을 경우

위의 그림과 같이 검색창에 추천 검색 자동 롤링 추가시, 돋보기 아이콘을 눌렀을 때 해당 word의 결과 값을 출력해야한다. 

 

Swiper의 API 중 slideChangeTransitionStart 를 사용하여 해결 가능하다.

 

swiper api url : https://swiperjs.com/api/

Swiper API

해당 결과값을 아작스를 태워 도출했는데, success 시에 해당 Swiper가 작동하게 하였다. 

 

// 지정 검색(slide)
function getFixedSearchWord(input_val) {
	//console.log('input_val', input_val);
	if (input_val == 'dd') {
		$.ajax({
			type: "POST",
			url: '/search/search_fixed',
			data: {},
			cache: false,
			success: function (data) {
				var html = '';
				//goSearchWord(\'' + val.search_word + '\');
				if( data.search_fixed_array != null ) { // 지정 검색이 등록되었을 경우
					if ( data.search_fixed_array.length > 1 ) { // 지정 검색이 등록되었는데 두개이상일 경우
						html += '<script>';
						html += '	var fixed_text_array = new Array();';
						html += '</script>';
						html += '<div style="height: 30px;" class="inner10 swiper-container">';
						html += '	<div class="swiper-wrapper">';
						$.each(data.search_fixed_array, function( key, val ) {
							html += '	<div style="height: 100px;" class="swiper-slide vertical-swiper-slide">';
							html += '		<a href="javascript:;" style="color:#b1a9a9;" class="fixed-search-text" title="' + val.search_word + '">' + '# ' + val.search_word + '</a>';
							html += '	</div>';
							html += '<script>';
							html += '	var title = $(\'.fixed-search-text\').attr(\'title\');';
							html += '	fixed_text_array[' + key + '] = "' + val.search_word+'";';							
							html += '</script>';
						});
						html += '	</div>';						
						html += '</div>';
						html += '<span class="btn-icon-search02" title="검색" onclick="goSearchWord( $(\'.vertical-swiper-slide.swiper-slide-active a\').attr(\'title\') );"></span>';
						html += '<script>';
						html += '	var innerSwiperFixedWord = new Swiper(\'.inner10\', {' ;
						html += '		direction: \'vertical\',';
						html += '		autoHeight: true,';
						html += '		loop: true,';
						html += '		autoplay: {';
						html += '			delay: 3000,';
						html += '		},';
						html += '		allowTouchMove: false,'
						html += '		speed: 1000';						
						html += '	});';
						
						html += '	innerSwiperFixedWord.on(\'slideChangeTransitionStart\', function() {';
						html += 'var active = $(\'.vertical-swiper-slide.swiper-slide-active a\').attr(\'title\');';
						html += '		$(".btn-icon-search02").attr( "onclick", "goSearchWord( $(\'.vertical-swiper-slide.swiper-slide-active a\').attr(\'title\') )" );';
						html += '	});';
						//html += '	innerSwiper;';
						// html += 'console.log( "eeeee", $(".vertical-swiper-slide.swiper-slide-active a").attr("title") )';
						
						html += '</script>';
						
					} else {  // 지정검색 하나일 경우
						// goSearchWord(\'' + val.search_word + '\')
						$.each(data.search_fixed_array, function (key, val) {
							html += '	<div style="display:flex; width: initial !important; height: 30px; font-size: 1.2rem;">';
							html += '		<a href="javascript:;" style="color:#b1a9a9;">' + '# ' + val.search_word + '</a>';
							html += '	</div>';
							html += '<span class="btn-icon-search02" title="검색" onclick="goSearchWord(\'' + val.search_word + '\');"></span>';
						});
					}
				} else { // 지정 검색이 등록되지 않았을 경우
					/* html += '	<div>';
					html += '		<a href="javascript:goSearchWord(\'nodata\');">' + '검색어를 입력해 주세요.' + '</a>';
					html += '	</div>'; */
					html += '<label for="search-input" class="blind">상품검색</label>';
					html += '<input type="text" id="search-input" name="word" class="user-input w80" placeholder="검색어를 입력하세요.">';
					html += '<span class="btn-icon-search02" title="검색" onclick="goSearch();"></span>';
					html += '<script>';
					html += '	$(\'#search-input\').focus();';
					html += '</script>';

				}
				$('#fixed-search').empty();
				$('#fixed-search').append(html);
			},
			error: function () {
				console.log('실패');
			}
		});
	}
}