bx슬라이더 탭 내에 들어가있을 경우.
본문
슬라이더를 탭 안에 넣으면 슬라이더가 정상작동을 안하네요.ㅠㅠ
bx슬라이더 사용했습니다.
해결해보신 분 있으시면 조언 좀 부탁드립니다. ㅠ_ㅠ..
찾아보니.. 탭을 누를때 bx 슬라이더가 실행되게 하면된다는데..
아시는 분 조언좀 ㅠㅠ..
<ul class="tab">
<li class="active"><a href="#"><em>탭1</em></a></li>
<li><a href="#"><em>탭2</em></a></li>
<li><a href="#"><em>탭3</em></a></li>
<li><a href="#"><em>탭4(갤러리)</em></a></li>
<li><a href="#"><em>탭5</em></a></li>
</ul>
<ul class="tab-cont">
<li class="active">
asdasdfasdf 111
</li>
<li>
asdfadfs222
</li>
<li>asdfasdf333</li>
<li>
<div class="gallery">
<!-- The main images -->
<ul id="bxslider">
<li>
<img src="/images/thum_01.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">1/7</p>
</li>
<li>
<img src="/images/thum_02.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">2/7</p>
</li>
<li>
<img src="/images/thum_03.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">3/7</p>
</li>
<li>
<img src="/images/thum_04.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">4/7</p>
</li>
<li>
<img src="/images/thum_05.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">5/7</p>
</li>
<li>
<img src="/images/thum_06.jpg" alt="이미지이름"/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line">이미지이름</p>
<p class="img_dasc page">6/7</p>
</li>
<li>
<img src="/images/thum_07.jpg" alt=""/>
<p class="img_dasc bg_cover"></p>
<p class="img_dasc txt reduce_line"></p>
<p class="img_dasc page">7/7</p>
</li>
</ul>
<!-- The thumbnails -->
<ul id="bxslider-pager">
<li data-slideIndex="0" class="active"><a href="" ><img src="/images/thum_01.jpg" alt="이미지이름" /></a></li>
<li data-slideIndex="1"><a href="" ><img src="/images/thum_02.jpg" alt="이미지이름" /></a></li>
<li data-slideIndex="2"><a href="" ><img src="/images/thum_03.jpg" alt="이미지이름"/></a></li>
<li data-slideIndex="3"><a href="" ><img src="/images/thum_04.jpg" alt="이미지이름"/></a></li>
<li data-slideIndex="4"><a href="" ><img src="/images/thum_05.jpg" alt="이미지이름"/></a></li>
<li data-slideIndex="5"><a href="" ><img src="/images/thum_06.jpg" alt="이미지이름"/></a></li>
<li data-slideIndex="6"><a href="" ><img src="/images/thum_07.jpg" alt="이미지이름"/></a></li>
</ul>
</div>
</li>
<li>
ㅁㄴㅇㄻㄴㅇㄹ
</li>
</ul>
<script>
$(function(){
// var $ = jQuery.noConflict();
var realSlider= $("ul#bxslider").bxSlider({
speed:1000,
pager:false,
nextText:'',
prevText:'',
infiniteLoop:true,
hideControlOnEnd:true,
onSlideBefore:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
}
});
var realThumbSlider=$("ul#bxslider-pager").bxSlider({
minSlides: 5,
maxSlides: 5,
slideWidth: 180,
slideMargin: 20,
moveSlides: 1,
pager:false,
speed:1000,
infiniteLoop:false,
hideControlOnEnd:true,
nextText:'<span></span>',
prevText:'<span></span>',
onSlideBefore:function($slideElement, oldIndex, newIndex){
$("#sliderThumbReal ul .active").removeClass("active");
$slideElement.addClass("active");
}
});
linkRealSliders(realSlider,realThumbSlider);
if($("#bxslider-pager li").length<6){
$("#bxslider-pager .bx-next").hide();
}
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
$("ul#bxslider-pager").on("click","a",function(event){
event.preventDefault();
var newIndex=$(this).parent().attr("data-slideIndex");
bigS.goToSlide(newIndex);
});
}
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
var $thumbS=$("#bxslider-pager");
$thumbS.find('.active').removeClass("active");
$thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
if(slider.getSlideCount()-newIndex>=5)slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount()-5);
}
})
</script>
답변 1
슬라이더 및 각종 jQuery , 자바스크립트 소스들이 탭 혹은 시각적으로 숨겨진 요소등에서 정상작동 하지 않는 경우가 있습니다.
이런 경우에 스크립트가 실행될 때, 목표가 되는 해당 요소가 display: none 이거나 visibility: hidden 이거나 각종 방법으로 숨겨져서 그 크기를 가늠할수 없게 된 경우가 주된 원인입니다.
말씀하신 탭류의 스크립트들도 활성화된 탭만을 보여주기 위해 나머지 탭들을 숨길테고 이 숨김요소로 인해 슬라이더를 적용하고 싶었던 탭의 스크립트는 슬라이더의 크기나 이를 감싸는 요소들의 크기등을 제대로 인식할 수 없는 상황이 되었을걸로 추측합니다.
물론, 이 모든 것은 문서의 로드시점에 슬라이더의 초기화를 선언하셔서 나타나는 문제이기도 합니다.
그런고로, 슬라이더를 포함하는 탭을 클릭시에 슬라이더를 초기화하는 선언을 하시거나 탭에 의해 숨겨지기 이전에 슬라이더를 초기화하시는 것이 방법입니다.
답변을 작성하시기 전에 로그인 해주세요.
