Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Bob Sutherton
Bob Sutherton
20,160 Points
Posted by Bob Sutherton
Bob Sutherton
20,160 Points

How to insert "slick carousel" into page?

There is a tutorial on the slick website, but I have never inserted anything like this into a page and by following the instructions I don't seem to be getting any results. I know that's not a question, but since I don't even know what I'm doing wrong, I don't know what to ask.

problem: There is no sign of "slick" being present in any way on my page.

http://kenwheeler.github.io/slick/

update: I did a little tinkering in codepen and was able to get as far as this, but still not much.

http://codepen.io/brockcallahan/pen/KfDFB

1 Answer

Matthew Hicks
Matthew Hicks
9,641 Points
Matthew Hicks
Matthew Hicks
9,641 Points

I think your problem might be with how you've referenced the slick and jQuery files on CodePen. Everything is there, just not where CodePen wants it to be!

CodePen doesn't use a <head> element in the way you would normally write it into your html - you need to add any external resources using the settings. I forked here for you to check out: http://codepen.io/Talmarei/pen/mGogz

Basically you just need to move the elements referenced in the <head> into the settings for the JS and CSS as external files. CodePen already has the jQuery library available, so you don't need to reference it at all, just select it from the dropdown in the settings. Just remember that if you move this to a real project you'll need to add these resources back into your HTML <head> and <script> tags as you had it before.

Hope this helps!