[Resolved] Slick Slider in GP Hooks

[Margot]

I’m looking to incorporate slick slider into my theme. I followed the instructions and put the css and js codes in .wp_header using GP Hooks. Here is what I entered:

<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

I used the exact same example and code as they use in their demo but the slider doesn’t seem to be loading up and functioning though. I’ve read that people sometimes have issues incorporating this slider in WordPress themes so not sure if I should be using GP Hooks or enqueuing the scripts in the functions.php file.

[Tom]

Have you considered using this plugin?: https://wordpress.org/plugins/slick-slider/

If you’re not interested in that, you’ll need to:

1. Use the full URL in your references:

css/slick.css -> yoururl.com/css/slick.css
css/slick-theme.css -> yoururl.com/css/slick-theme.css

You should be able to read the file by putting yoururl.com/css/slick-theme.css into your address bar.

2. Replace this in your jQuery:

$(document)

With this:

jQuery(document)

[Margot]

My apologies, I just realized that I forgot to mention that I actually did use the full url on all the header css and js links on my website. I didn’t want to post the full link here so I shortened it but it is indeed pointing in the right direction. I verified each one of them individually as well just to double check.

I also made the jQuery replacement you mentioned but it’s still not functioning for me.

ps. Thanks for the suggestion. I would prefer to manually use the slick slider than get the plugin because I’m planning on integrating it with Advanced Custom Fields and more responsive options so doing it without a plugin would give me a bit more control overall.

[Tom]

You still have this in your code: setting-name: setting-value

That needs to be removed or replaced with actual setting names and values.

[Margot]

That did it! Thank you again!!

[Tom]

You’re welcome 🙂

[Author]

Posts