Question

我正在尝试开发一个wordpress主题，它有一个模态窗口，显示从高级自定义字段库查询的图像的幻灯片库。我正在使用FLEXSLIDER。

以下是我的代码：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">                                  

      <?php 
        $images = get_sub_field('featured_projects');
        if( $images ): ?>
          <div id="slider" class="flexslider">
            <ul class="slides">
              <?php foreach( $images as $image ): ?>
                <li>
                  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                  <p><?php echo $image['caption']; ?></p>
                </li>
              <?php endforeach; ?>
            </ul>
            <div class="custom-navigation">
              <a href="#" class="flex-prev">Prev</a>
              <div class="custom-controls-container"></div>
              <a href="#" class="flex-next">Next</a>
            </div>
          </div>
        <?php endif; ?>
      </div>
      <div class="modal-footer"></div>                  
    </div>
  </div>
</div>

当我单击按钮触发要显示的模式时，第一个图像与图像列表一起显示但是当我单击下一个或上一个按钮时，滑块不会移动，但是当我单击<时strong>检查元素以查看图像是否已加载，下一个和上一个按钮令人惊讶地工作并显示下一个图像。

这是第一次加载flex滑块时的输出： screenshot

这是打开inspect元素时的输出： screenshot2

Flexslider的查询触发器：

$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    controlsContainer: $(".custom-controls-container"),
    customDirectionNav: $(".custom-navigation a"),
  });
});

我有什么遗失的吗？另一个人遇到了同样的问题，但没有得到答案 - https://stackoverflow.com/questions/34767003/flex-carousel-items-are-not-displaying-properly-until-i-clicked-on-inspect-eleme。请帮忙

Answer 1

试试这个，这对我有用。

    var initFlexSliders = function() {
      $('.flexslider').flexslider({
          animation: "slide",
          slideshow: false,
          controlNav: false,
          directionNav: true, 
          start: function(slider){
              $('.flexslider').resize();
          }
      });
  };

//call this function to show the slider
initFlexSliders();

Answer 2

如果仍然遇到此问题的人，只需尝试在页面末尾添加这一行即可。

<script>jQuery('.flexslider').flexslider();</script>

除非单击inspect元素，否则模态窗口上的Flex滑块不起作用

2 个答案: