Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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!