bxslider нужно что бы при клике на изображение оно открывалось в модальном окне с элементами навигации вперед-назад

bxslider работает и в нем нормально листаются уменьшенного размера изображения, нужно сделать так что бы при нажатии на изображение открывалась его полная версия и стрелки для листания картинок вперед-назад. Скажу что в программировании я не силен, но благодаря stackoverflow мне удалось сделать так что бы полная версия изображения открывалась в модальном окне, но не получается подтянуть элементы навигации, помогите мне пожалуйста!

var slider = $('.bxslider').bxSlider({pagerCustom: '#bx-pager', controls: true}); не выводит элементы навигации в модальном окне!

osc_resource_url() - ссылка на полное изображение

osc_resource_preview_url() - ссылка на уменьшенное изображение

<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>