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