幻灯片未在 flexslider 上显示

Question

我正在构建一个新的主页 WordPress 模板。该模板使用Flexslider 显示Vimeo 视频，简单的标题和描述。

我已经按照FlexSlider documentation 进行了操作，但幻灯片都是空白的。

这是我通过 Chrome Inspector 看到的内容：

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

由于某种原因，JQuery 没有启动。我尝试从 <li> 标记中删除内联样式。我还尝试删除我正在运行的灯箱脚本。似乎没有任何效果。

你能看出是什么原因造成的吗？我在这里上传了一个演示：http://bit.ly/1Sgpu99

更新

以下是模板的相关来源：

<?php // Begin main loop
    while ( have_posts() ) : the_post(); ?>
        <?php // Begin carousel repeater
        if( have_rows('slides') ): ?>
            <div class="flex-container">
                <div class="flexslider">
                    <ul class="slides">
                    <?php while( have_rows('slides') ): the_row(); 
                        // vars
                        $background_image = get_sub_field('background_image');
                        $video = get_sub_field('video');
                        $title = get_sub_field('title');
                        $description = get_sub_field('description');
                        $background_image = get_sub_field('background_image');
                    ?>
                        <li class="slide" style="background: url(<?php echo $background_image; ?>) no-repeat center; background-size: cover;">
                            <div class="container">
                                <div class="half">
                                    <div class="video"><?php echo $video; ?></div>
                                </div>
                                <div class="half last">
                                    <header class="entry-header">
                                        <h1 class="entry-title"><?php echo $title; ?></h1>
                                    </header>
                                    <?php echo $description; ?>
                                </div>
                            </div><!-- .container -->
                        </li>
                    <?php endwhile; ?>
                    </ul>
                </div><!-- .flexslider -->
            </div><!-- .flex-container -->
        <?php // End repeater 
        endif; ?>
 <?php // End main loop
endwhile;  ?>

Answer 1

由于某种原因 flexslider 尚未在您的页面中初始化。

如果您将此代码放在 Chrome 或 Firefox 控制台中

jQuery(".flexslider")
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

然后按回车键，滑块正在显示（完全损坏的 css，但这是另一个问题 :)）

我无法从提供的代码中判断滑块未初始化的原因，但您必须调试您的 .js 代码，而不是 .php。将一些 console.log() 放在初始化滑块的 .js 文件中，以确保加载该文件，使用 wp_enqueue_script() 加载具有适当依赖性的 .jsfiles 以确保以正确的顺序加载文件等开。