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

然后按Enter键，滑块显示（完全破坏css，但这是另一个问题:)）

我无法从提供的代码中了解滑块未初始化的原因，但您必须调试.js代码，而不是.php。将一些console.log（）放在初始化滑块的.js文件中，以确保加载文件，使用wp_enqueue_script()加载.js文件，并确保文件已加载正确的顺序等等。

没有在flexslider上显示的幻灯片

1 个答案: