javascript - 使用 stellar.js 时基本视差不起作用

Question

在过去的几个小时里，我一直在尝试解决一个非常简单的解决方案，但我正在用头撞墙，希望这里有人能发现我缺少的东西。

尝试使特色图像 slider 具有视差效果(类似于 this )。我在标题中调用了恒星脚本，如下所示:

<script src="<?php echo get_stylesheet_directory_uri(); ?>/javascripts/jquery.stellar.min.js"></script>
<script>
$(function() {
    $.stellar();
});
</script>

这是我想要比页面其余部分滚动得慢的图像 slider (我正在使用自定义字段插件......这就是您将看到的名称):

<div class="featured-slider parallax" data-stellar-background-ratio="0.5"><?php the_field('featured_slider'); ?></div>

这是我添加到元素中的唯一 CSS:

.parallax {
    position: relative;
}

还有什么我应该做的吗？我是否遗漏了一些明显的东西？

Here's the page where I'm trying to do this.

Answer 1

在您的页面上，您似乎在 jquery 之前添加了 stellar 的脚本标记。您需要的顺序是 Jquery、stellar，然后是您的特殊脚本。你所做的其他一切看起来都是正确的。

//script tag for jquery
//script tag for stellar
//your script with stellar stuff. 

另外，Wordpress 有时不喜欢 $。使用 jQuery 来初始化 stellar 并准备好文档。