基本的视差无法使用stellar.js

Question

I've spent the past couple hours trying to solve what should be a really simple solution, but I'm banging my head against the wall and hoping someone here can spot what I'm missing.

Trying to make a featured image slider have a parallax effect to it (similar to this ). I've called the stellar script in my header as follows:

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

This is the image slider that I want to scroll slower than the rest of the page (I'm using a custom fields plugin... that's what you'll see being called there):

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

And here's the only CSS I've added to the element:

.parallax {
    position: relative;
}

Is there something more I should be doing? Am I missing something obvious?

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

Answer 1

It looks like on your page you are adding the script tag for stellar before jquery. You need the order to be Jquery, stellar, then your special script. Everything else you are doing looks correct.

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

Also Wordpress sometimes does not like the $ . Use jQuery instead to initialize stellar and document ready.