bxSlider height 0 이슈
이번 포스팅은 내가 개발을 하면서 겪었던 이슈에 대해 소개할 것 이다.
jsFiddle 오류가 있는 것 같아 아래 소스를 첨부 시켜 놓았다. 소스코드 바로가기
codePen 으로 변경하였다.
문제
bxSlider 라는 슬라이더 라이브러리를 쓰던 중 특정 슬라이더의 height 가 0으로 설정되는 것을 확인하였다.
See the Pen dayGBX by PAPICO (@joseongryun) on CodePen.
원인
$(selector).bxSlider({}); 로 생성한 슬라이더는 display:none;을 하면 height가 0이 된다.
해결 방법
탭을 변경할때 마다 해당 slider 를 다시 reload 해서 그려야 한다.
slider.reloadSlider(); 를 통해 bxSilder를 리로드 시킬수 있다.
See the Pen XOWdmr by PAPICO (@joseongryun) on CodePen.
소스코드
- bxslider.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bxslider</title> <link rel="stylesheet" href="./dist/jquery.bxslider.css"> <script src="./dist/jquery-3.3.1.js"></script> <script src="./dist/jquery.bxslider.min.js"></script> <style> .tab { list-style: none; padding: 0; } .tab>li { display: inline-block; } .tab .tab_li { font-size: 20px; text-decoration: none; color: #fff; background: #525252; padding: 5px 15px; cursor: pointer; box-sizing: border-box; } .tab .tab_li.on { background: #f0f0f0; border: 1px solid #525252; color: #525252; } .tab_div { width: 400px; display: none; } .tab_div.on { display: block; } .bslider li { width: 400px; overflow: hidden } .bslider li img { width: 100%; height: auto; } </style> <script> $(document).ready(function () { var slider1 = $("#cat_slider").bxSlider({ mode: 'horizontal' }); var slider2 = $("#dog_slider").bxSlider({ mode: 'horizontal' }); $(".tab_li").on("click", function (e) { e.preventDefault(); $(".tab_div").removeClass("on"); $(".tab_li").removeClass("on"); $(e.target).addClass("on"); if ($(e.target).attr("id") === "dogtab") { $("#dog_div").addClass("on"); slider2.reloadSlider({}); } else { $("#cat_div").addClass("on"); slider1.reloadSlider({}); } }) }) </script> </head> <body> <ul class="tab"> <li><a href="#" class="tab_li on" id="cattab">cat</a></li> <li><a href="#" class="tab_li" id="dogtab">dog</a></li> </ul> <div class="tab_div on" id="cat_div"> <ul class="bslider" id="cat_slider"> <li><img src="https://images.pexels.com/photos/979247/pexels-photo-979247.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> <li><img src="https://images.pexels.com/photos/96938/pexels-photo-96938.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> <li><img src="https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> </ul> </div> <div class="tab_div" id="dog_div"> <ul class="bslider" id="dog_slider"> <li><img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> <li><img src="https://images.pexels.com/photos/460823/pexels-photo-460823.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> <li><img src="https://images.pexels.com/photos/1663421/pexels-photo-1663421.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt=""></li> </ul> </div> </body> </html>
'Study > ETC' 카테고리의 다른 글
| Clojure로 LISP 톺아보기 (2) - Symbol 과 함수 (0) | 2019.05.21 |
|---|---|
| Clojure로 LISP 톺아보기 (1) - 데이터 구조 (0) | 2019.05.20 |
| [개발]예측 데이터 그래프(Dygraph) (0) | 2019.01.22 |
| [개념잡기] jQuery-UI (0) | 2018.10.08 |
| [개념잡기] D3JS 기본 개념 및 API (1) | 2018.09.18 |
