bxslider与动态HTML

Question

我在模态中使用bxslider,因为模式应该根据用户选择显示图像,我正在动态地在滑块内编写html.

这是我的模态代码:

<div class="modal fade" id="figure_carousel" role="dialog">
    <div class="modal-dialog" style="width: 80%; height: 100%;">
        <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>
                <br>
            </div>

            <div class="modal-body">

                <ul class="bxslider" id="elements">



                </ul>

            </div>

            <div class="modal-footer">
                <input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
            </div>  

        </div>
    </div>
</div>

单击图像时,我运行以下脚本

<script>
    $(document).on("click",".paper_img",function(event){
        var modalview = get_html()
        document.getElementById('elements').innerHTML = ""
        $('#figure_carousel').modal('show');
        $('.bxslider').append(modalview.innerHTML);

        var slider = $('.bxslider').bxSlider({mode: 'horizontal'});
        slider.reloadSlider();
    });
</script>   

获取一些html(使用get_html函数),将其写入模态中的id = elements ul并启动模态.让我们假设从get_html函数返回的html代码如下所示

<li><img src="/static/sourcefiles/image.png" alt="figure"/></li>

打开模态时,图像的大小是错误的.如果我手动调整浏览器窗口的大小,幻灯片将变为正确.不知怎的,bxslider无法处理我动态编写HTML代码.如何在编写html代码或其他任何方法解决此问题后加载bxslider？谢谢carl编辑:这是我在一个例子中的问题

http://plnkr.co/edit/sHVq6cggMfVVS4QywQNs?p=preview

Answer 1

当隐藏引导模式时,你正在调用bxSlider().可能是bxSlider无法检测到图像高度的原因.

var bx;
$('#myModal1').on('shown.bs.modal', function () {
  if(bx === undefined){
    bx= $('.bxslider').bxSlider();
  } else {
    bx.reloadSlider(); 
  }
});

'shown.bs.modal'当模型对用户可见时,引导事件将触发.然后我们调用bxSlider(),每次添加图像时我们都调用bx.reloadSlider();

示例:http://plnkr.co/edit/LTMCuDUc3vUm9VnmmvzG？p = preview