탭 메뉴와 bxSlider 같이 사용하기

탭 메뉴속에 bxSlider를 넣을경우 첫번째 화면은 잘 나오는데
두번째 탭부터 제대로 나오질 않는 이슈가 발생했었다.
아무래도 'display': 'none'으로 되어 있어서 bxSlider가 인지를 못하는 것 같다.
삽질을 하다가 구글링은 역시 없는 것이 없다!
구글링에서 검색한 내용을 넣어보니 적용이 잘 되었다.

탭 메뉴 소스

필자가 사용하는 탭 메뉴 소스이다.
HTML

<ul class="ui_tabs_menu">
  <li><a class="current" href="#item01">tabmenu01</a></li>
  <li><a href="#item02">tabmenu02</a></li>
  <li><a href="#item03">tabmenu03</a></li>
</ul>
<div class="ui_tabs_contents_wrap">
  <div class="ui_tab_content" id="item01">
    <ul class="bx_slider">
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
    </ul>
  </div>
  <div class="ui_tab_content" id="item02">
    <ul class="bx_slider">
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
    </ul>
  </div>
  <div class="ui_tab_content" id="item03">
    <ul class="bx_slider">
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3&nbsp;Tab&nbsp;Item&w=118&h=85" alt="" /></a>
      </li>
    </ul>
  </div>
</div>

javascript:

function uiTabsMenu () {
	var $menu = $('.ui_tabs_menu'),
		$contWrap = $('.ui_tabs_contents_wrap'),
		_content ='.ui_tab_content',
		curr = 'current';

	if(!$menu.length ) { return }
	$(_content).css('display', 'none');
	$contWrap.each(function(){
		$(this).find('div' + _content +':first').css('display', 'block');
	});
	$menu.on('click','a', function(){
		if(!$(this).hasClass(curr)){
			$(this).addClass(curr).closest('li').siblings('li').find('.' + curr).removeClass(curr);
			$($(this).attr('href')).css('display', 'block').siblings('div'+_content).css('display', 'none');
		}
		this.blur();
		return false;
	});
};

bxSlider 소스

display:none 되었던것을 다시 실행시켜야하기 때문에 reloadSlider를 API를 사용했다.

function tabMenuSlider() {
	var $tabmenu = $('.ui_tabs_menu'),
	$contWrap = $('.ui_tabs_contents_wrap'),
	$sliderClass = '.bx_slider',
	config = {
		maxSlides:3,
		slideWidth:251,
		slideMargin: 30,
		infiniteLoop:false,
		hideControlOnEnd:false,
		pager:false,
		nextText: '다음 페이지',
		prevText: '이전 페이지'
	};

	var sliders = new Array();
	$($sliderClass).each(function(i, slider) {
		var len = $(slider).find('> li').length;
		if(len < 3) {
			sliders[i] = $(slider).addClass('nonslider');
		} else {
			sliders[i] = $(slider).bxSlider(config);
		}
	});

	if(!$tabmenu.length ) { return }
		$contWrap.each(function(){
			if($(this).find('div.ui_tab_content').is(':first')) {
				slider.reloadSlider(config);
			}
		});
	$tabmenu.on('click', ' a', function(e){
		var _target = $(this).attr('href');

		if($(_target).css('display') === 'block') {
			$.each(sliders, function(i, slider){
				if(!slider.hasClass('nonslider')) {
					slider.reloadSlider(config);
				}
			});
		}
		e.preventDefault();
	});
}

샘플 화면 보기