javascript - 幻灯片未在 FlexSlider 上显示

Question

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

我已关注FlexSlider documentation确实如此，但幻灯片都是空白的。

这是我通过 Chrome 检查器看到的内容:

.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');
      }
  });

然后按回车键， slider 就会显示(虽然CSS完全损坏，但这是另一个问题:))

我无法从提供的代码中判断 slider 为何未初始化，但您必须调试 .js 代码，而不是 .php。将一些 console.log() 放入初始化 slider 的 .js 文件中，为了确保加载该文件，请使用 wp_enqueue_script() 以正确的方式加载您的 .js 文件依赖以确保文件以正确的顺序加载等等。