幻灯片未显示在柔性滑块上

Slides not showing on flexslider

本文关键字:显示 幻灯片      更新时间:2023-09-26

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

我完全遵循了FlexSlider文档,但幻灯片都是空白的。

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

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

由于某种原因,JQuery没有启动。我已经尝试从<li>标记中删除内联样式。我还尝试过删除我正在运行的lightbox脚本。似乎什么都不起作用。

你能看到是什么原因造成的吗?我在这里上传了一个演示: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;  ?>

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

如果你把这个代码放在Chrome或Firefox控制台

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

点击回车键,滑块显示(whit完全损坏css,但这是另一个问题:)

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