[Jquery] Bx Slider display:none 이였다가 display:block 으로 변경시 height 값 0이 되는문제

웹코딩을 하다... bx슬라이더를 사용하게 되었습니다.

웹작업중 bx슬라이더가 display:none 이였다가... 버튼을 클릭을 하면 보여야 하는 부분이 있었습니다... 

그런데 display:none으로 되어있으면 처음에 슬라이더가 보여지지 않으니, 높이값을 0으로 잡는 오류가 있더라구요....

물론 bxslider 개발자는 이런상황까지 생각해서 만든게 아니기 때문에 오류가 아니겠죠... ㅎㅎㅎ

해당문제를 해결하기 위해서.... 고민을 했습니다.

반응형이라서.. height 값을 강제로 잡아줄수 없고 예매한상황 됬죠....

해외 사이트중에 bx슬라이드를 reload 하는 방법이 있다는걸 알고

리로드를 하면 되겠구나 하여 아래와 같은 코드를 작성해보았습니다.

<script>

var mySlider;

$(function() {

    mySlider = $('#slider').bxSlider({

            easing: 'easeInCubic',

            displaySlideQty: 3,

            moveSlideQty: 1,

            infiniteLoop: false,

            hideControlOnEnd: true

    });

    $("#processSignUp").click(function() {   

        $("#trainings-slide").show();

        mySlider.reloadSlider();

    });

});

</script>

이와 같이 하면 버튼을 클릭하는 순간 bx슬라이더가 다시 로드를 하면서 높이값이 해결이 됩니다.

역시 google은 최고 인것 같습니다 ^^