탭 메뉴속에 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 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=1 Tab 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 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=2 Tab 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 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3 Tab Item&w=118&h=85" alt="" /></a>
</li>
<li>
<a href="#"><img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=3 Tab 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();
});
}
2020-04-27 at 10:02
안녕하세요. 원하던 자료였는데 정말 감사합니다.. 다만 한가지만 여쭤봐도 될까요..?
제가 퍼블리싱 왕초짜라서요 ㅠㅠ
$(“.bx-start”).hide(); //onload시 시작버튼 숨김.
$(“.bx-stop”).click(function(){ // 중지버튼 눌렀을때
$(“.bx-stop”).hide();
$(“.bx-start”).show();
sliders.stopAuto();
return false;
});
$(“.bx-start”).click(function(){ //시작버튼 눌렀을때
$(“.bx-start”).hide();
$(“.bx-stop”).show();
sliders.startAuto();
return false;
});
이런 소스를 가져다가 붙였는데 startAuto, stopAuto 같은 속성이나 메소드를 지원하지 않는다고 뜨네요..ㅠ bxslider 내에 선언되있는 걸로 아는데 뭐가 문제일까요.. 혹시나 답변 부탁드립니다…
2020-10-19 at 16:33
안녕하세요. 요즘 블로그를 잘 운영을 못해서 확인을 이제야 했는데 해결 되었겠죠?
답변이 늦게 해서 죄송합니다.