引导模式和 BXslider 不工作答案

【问题标题】：Bootstrap modal and BXslider not working引导模式和 BXslider 不工作
【发布时间】：2015-10-01 12:20:27
【问题描述】：

HTML：

<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
  OPEN MODAL
</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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="myModalLabel">BX Slider</h4>
      </div>
      <div class="modal-body">
        <ul class="bxslider">
          <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
          <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
          <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
        </ul>

        <div id="bx-pager">
          <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
          <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
          <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JS：

function quickView() {
  var slider = $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager',
    controls: false
  });
  slider.destroySlider();
  //$('#myModal').modal('show');
  slider.reloadSlider();
}
$(".quickview").on("click", quickView);

我有一个引导模式，我正在将动态图像库注入其中。所以外汇。我在一个页面上有 10 个链接，每个链接都包含带有图像 URL 的唯一数据属性。然后我将这些 URL 发送到我的点击事件中，因此我可以将它们与 BXslider 一起使用，但它似乎不起作用。我正在单击事件中重新加载 BXslider，但未显示“主图像”。但是，如果我将代码从点击事件中移出，它似乎可以正常工作。

这里有什么建议吗？

代码笔： http://codepen.io/marting/pen/dYNabj?editors=101

【问题讨论】：

我已经建立了一个新的例子，我正在像在真实站点上一样注入图像 src：codepen.io/marting/pen/ZbLwwx?editors=101
我刚刚发现，如果我调整图像大小，图像就会出现。在 BXsliders Git 页面上发现了一个错误，所以我想我在这里有点卡住了.. github.com/stevenwanderski/bxslider-4/issues/359

标签： bootstrap-modal bxslider

【解决方案1】：

我把你的代码改成了这个，它就像一个魅力

JS：

function quickView() {
var slider = $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager',
    controls: false 
});
setTimeout(function() {
    slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);

在这里查看它的工作原理：http://codepen.io/anon/pen/JYgxOE?editors=101

【讨论】：