bxSlider, no next/prev icons on shrink

Illustrates that when a slider is at max width with no next/prev icons, they do not appear when the screen is resized. To replicate (in Chrome, for example), make the Result frame wide so all 6 panels are showing, and no next/prev icons are visible. Then Run, and shrink the Results panel. Not that no next/prev icons will display until one of the dots is selected. Conversely, when the screen starts narrow, and the Results frame is widen so all items are showing, the next and prev arrows are not hidden.

HTML

<script src="https://rawgithub.com/stevenwanderski/bxslider-4/master/jquery.bxslider.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/stevenwanderski/bxslider-4/master/jquery.bxslider.css">
<div class="slider">
            <div class="slider-panel">
              <div class="slider-panel-image">
                <img alt="Team Management Systems Learning Exchange" vspace="6" hspace="10" src="/images/free_resources/lex2b_features.jpg" xmlns="http://www.w3.org/1999/xhtml" />
              </div>
              <div class="slider-panel-text">This is text for the panel</div>
            </div>
            <div class="slider-panel">
              <div class="slider-panel-image">
                <img alt="Panel 2" vspace="6" hspace="10" src="/images/free_resources/lex2b_features.jpg" xmlns="http://www.w3.org/1999/xhtml" />
              </div>
              <div class="slider-panel-text">This is text for panel 2</div>
            </div>
            <div class="slider-panel">
              <div class="slider-panel-image">
                <img border="0" src="/images/promo/oct13_sml-any-any-preserveRatio.jpg" class="" width="74" height="110" alt="Marc Tscheuschner" vspace="16" hspace="10" xmlns="http://www.w3.org/1999/xhtml" />
              </div>
              <div class="slider-panel-text">This is text for panel 3</div>
            </div>
            <div class="slider-panel">
              <div class="slider-panel-image">
                <img border="0" src="/images/promo/oct13_sml-any-any-preserveRatio.jpg" class="" width="74" height="110" alt="Marc Tscheuschner" vspace="16" hspace="10" xmlns="http://www.w3.org/1999/xhtml" />
              </div>
              <div class="slider-panel-text">This is text for panel 4</div>
            </div>
            <div class="slider-panel">
              <div class="slider-panel-image">
                <img border="0" src="/images/promo/oct13_sml-any-any-preserveRatio.jpg" class="" width="74" height="110" alt="Marc...

CSS

.slider-panel-image {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 120px;
    width: inherit;    
}

.slider-panel-text {
    text-align: center;
}

.bx-wrapper {
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.bx-wrapper img {
    margin: 0 auto;
}

JavaScript

$('.slider').bxSlider({
        minSlides: 1,
        maxSlides: 6,
        moveSlides: 1,
        slideWidth: 150,
        slideMargin: 20,
        infiniteLoop: false,
        hideControlOnEnd: true
    });