幻灯片未显示在 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() 加载具有适当依赖性的 .js 文件以确保文件已加载以正确的顺序加载等等。

幻灯片未显示在 flexslider 上

Slides not showing on flexslider

javascript

wordpress

jquery

flexslider