基本的視差無法使用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之前添加了star的腳本標簽。 您需要的命令是Jquery，stellar，然后是您的特殊腳本。 您正在執行的其他所有操作看起來都是正確的。

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

此外，Wordpress有時不喜歡$ 。 改用jQuery初始化恆星並准備好文檔。