bx슬라이더 탭 내에 들어가있을 경우. 채택완료
슬라이더를 탭 안에 넣으면 슬라이더가 정상작동을 안하네요.ㅠㅠ
bx슬라이더 사용했습니다.
해결해보신 분 있으시면 조언 좀 부탁드립니다. ㅠ_ㅠ..
찾아보니.. 탭을 누를때 bx 슬라이더가 실행되게 하면된다는데..
아시는 분 조언좀 ㅠㅠ..
Copy
<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개
8년 전
슬라이더 및 각종 jQuery , 자바스크립트 소스들이 탭 혹은 시각적으로 숨겨진 요소등에서 정상작동 하지 않는 경우가 있습니다.
이런 경우에 스크립트가 실행될 때, 목표가 되는 해당 요소가 display: none 이거나 visibility: hidden 이거나 각종 방법으로 숨겨져서 그 크기를 가늠할수 없게 된 경우가 주된 원인입니다.
말씀하신 탭류의 스크립트들도 활성화된 탭만을 보여주기 위해 나머지 탭들을 숨길테고 이 숨김요소로 인해 슬라이더를 적용하고 싶었던 탭의 스크립트는 슬라이더의 크기나 이를 감싸는 요소들의 크기등을 제대로 인식할 수 없는 상황이 되었을걸로 추측합니다.
물론, 이 모든 것은 문서의 로드시점에 슬라이더의 초기화를 선언하셔서 나타나는 문제이기도 합니다.
그런고로, 슬라이더를 포함하는 탭을 클릭시에 슬라이더를 초기화하는 선언을 하시거나 탭에 의해 숨겨지기 이전에 슬라이더를 초기화하시는 것이 방법입니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인