幻灯片未显示在柔性滑块上
Slides not showing on flexslider
我正在构建一个新的主页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
文件,以确保文件按正确的顺序加载,依此类推。
相关文章:
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 创建具有可变长度幻灯片显示的幻灯片
- JavaScript幻灯片显示,每个幻灯片的下一个按钮都有不同的位置
- ASP MVC网站与vegas背景幻灯片不显示背景后发布到服务器
- 旧的javascript幻灯片只显示wihtout幻灯片(onclick)
- 如何使用幻灯片显示其他图像
- 第一张幻灯片不会显示在选项卡内的 jQuery Royal Slider 中
- 需要 DIV 显示/隐藏开关在幻灯片切换发生后发生
- Jquery滑块,如果显示父项,则幻灯片不会全宽:无
- .effect('幻灯片'..不显示下一个对象
- Jquery下拉菜单位于幻灯片上方的一个显示位置
- 显示所有幻灯片Jquery
- 显示幻灯片切换不起作用
- 自动调整显示幻灯片内容的高度
- 如何显示幻灯片默认情况下切换关闭
- 显示幻灯片编号orbit.jsfoundation6zurb
- 如何根据随机幻灯片编号显示幻灯片
- 在网页上显示幻灯片的数量
- jQuery隐藏显示幻灯片悬停
- 如何在 BX滑块中制作变体显示幻灯片