带动态html的bxslider [英] bxslider with dynamic html

问题描述

我在一个模式中使用bxslider，并且由于模式应该根据用户选择呈现图像，我正在动态地在滑块内写入html。

以下是我的模态代码：

 < div class = modal fadeid =figure_carouselrole =dialog> 
< div class =modal-dialogstyle =width：80％; height：100％;> 
< div class =modal-content> 
 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮> 
< br> 
< / div> 
 
< div class =modal-body> 
 
< ul class =bxsliderid =elements> 
 
 
 
< / ul> 
 
< / div> 
 
< div class =modal-footer> 
< input class =btn btn-defaulttype =buttondata-dismiss =modalvalue =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：'horizo​​ntal'}）; 
 slider.reloadSlider（）; 
}）; 
< / script> 
  

得到一些html（使用get_html函数），将它写入模态并启动模式。让我们假设从get_html函数返回的html代码如下所示：

 < li>< img src =/ static / sourcefiles / image.pngalt =figure/>< / li> 
  

当模式打开时，图像的大小是错误的。如果我手动调整浏览器窗口大小，幻灯片将变得正确。不知何故，bxslider无法动态处理我写html代码。如何在编写html代码或任何其他方式解决此问题后加载bxslider？
感谢
carl
编辑：这是我在示例中的问题

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

解决方案

当引导模式隐藏时，您正在调用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

I am using bxslider in a modal and since the modal should present images depending on the user selection, I am writing the html within the slider dynamically.

Here is my modal code:

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

when an image is clicked I run the following script

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

which gets some html (using the get_html function), writes it in the id=elements ul in the modal and launches the modal. Lets assume the html code which comes back from the get_html function looks like this

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

When the modal is opened, the size of the images is wrong. If I resize the browser window manually, the slides become correct. Somehow bxslider cannot deal with me writing html code dynamically. How can I load the bxslider after writing the html code or any other way to solve this? thanks carl EDIT: Here is my problem in an example

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

解决方案

your are calling the bxSlider() when the bootstrap modal is hidden. May be the reason bxSlider couldn't detect the height of the images.

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

'shown.bs.modal' it the bootstrap event fires when the model is made visible to user. then we call the bxSlider(), and everytime we add images we are calling bx.reloadSlider();

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

这篇关于带动态html的bxslider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！