flexslider在bootstrap模态下不显示/显示零高度

Question

我在尝试在bootstrap模式下显示我的flexslider时遇到了一些问题。仅当我尝试调整浏览器大小或尝试检查元素时，才会显示flexslider。控制台没有显示任何错误

这是我正在进行的工作。

<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://localhost/adspin/wp-content/uploads/2016/01/image1.jpg" />
    </li>
    <li>
      <img src="http://localhost/adspin/wp-content/uploads/2016/01/image2.jpg" />
    </li>
  </ul>
</div>

<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://localhost/adspin/wp-content/uploads/2016/01/image1.jpg" />
    </li>
    <li>
      <img src="http://localhost/adspin/wp-content/uploads/2016/01/image2.jpg" />
    </li>
  </ul>
</div>


$(document).ready(function() {

    $('#carousel').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      itemWidth: 210,
      itemMargin: 5,
      asNavFor: '#slider'
    });

    $('#slider').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      smoothHeight: true,
      sync: "#carousel"
    });
});

更新了Javascript代码

$(document).ready(function() {
            $('.flexslider').flexslider({
              animation: "slide",
              controlNav: false,
              animationLoop: false,
              slideshow: false,
              smoothHeight: true,
        });
});

$(".modal").on("shown.bs.modal", function (e) {
         $('.flexslider').flexslider();
});

Answer 1

有人认为你需要做的就是在bootstrap模式上调用/调用你的滑块函数，如下所示

 $('#your-modal-id').on('shown.bs.modal', function() {
   // call your slider function
})