javascript - 带有动态 html 的 bxslider

Question

我在模态中使用 bxslider，因为模态应该根据用户选择显示图像，所以我在 slider 内动态编写 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？ 谢谢 卡尔 编辑:这是我在示例中遇到的问题

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' 当模型对用户可见时， Bootstrap 事件会触发。然后我们调用 bxSlider()，每次添加图像时我们都调用 bx.reloadSlider()；

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