基本视差不使用stellar.js

Question

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

试图使一个特色的图像滑块具有视差效应(类似于这)。我在我的标题中调用了这个出色的脚本如下：

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

这是图像滑块，我想滚动慢于页面的其余部分(我使用的是自定义字段插件.你会看到这里被称为)：

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

下面是我添加到元素中的唯一CSS：

.parallax {
    position: relative;
}

我还应该做些什么吗？我漏掉了什么明显的东西吗？

这是我要做的那一页。

Answer 1

看起来，在您的页面上，您要在jquery之前为stellar添加脚本标记。您需要的顺序是Jquery，script，然后是您的特殊脚本。你正在做的其他事情看起来都是正确的。

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

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