bxslider in a modal window with navigation elements

Question

bxslider works and scrolls through reduced-sized images; when you click on an image, it's full version opens in a modal window.

I can't display navigation elements in a modal window.

var slider = $('.bxslider').bxSlider({pagerCustom: '#bx-pager', controls: true}); does not display navigation elements in a modal window!

osc_resource_url() - link to full image

osc_resource_preview_url() - link to thumbnail image


```
<div class="col-md-12">
        <ul class="bxslider">
            <?php $i = 0; while(osc_has_item_resources()) : ?>
                <li>
                    <a href="javascript:;" data-href="<?php echo osc_resource_url(); ?>" data-target="#imagemodal" class="quickview">
                        <img src="<?php echo osc_resource_preview_url(); ?>" />
                    </a>
                </li>
            <?php $i++; endwhile; ?>
        </ul>
        
        <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="bxModalLabel">Title</h4>
            </div>
              <div class="modal-body">
               <img class="modal-img" />
              </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
          </div>
         </div>
        </div>
</div>
<script>
    var bxSlider;

    $(document).ready(function(){

    $(".quickview").on("click", function() {
        var $this = $(this);
        var href = $(this).data("href");
        $("#imagemodal img").attr("src",href );
        $("#imagemodal").modal("show");
        var slider = $('.bxslider').bxSlider({pagerCustom: '#bx-pager', controls: true});
        setTimeout(function() { slider.reloadSlider();}, 200);
    });
        
        bxSlider = $('.bxslider').bxSlider({
            responsive : true,
            adaptiveHeight: true,
            touchEnabled: true,
            mode: 'fade',
            pagerCustom: '#bx-pager'
        });
    });
</script>