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 Using jQuery Plugins Using a jQuery Carousel Add a Carousel to a Page

Bobby Verlaan
Bobby Verlaan
29,538 Points
Posted by Bobby Verlaan
Bobby Verlaan
29,538 Points

jQuery slick plugin gives messed up carrousel

I've added the jQuery slick plugin script at the bottom of the page and called the plugin to load on the .slides class on the following HTML:

<!-- carousel goes here -->
  <div class="slides">
  <div>slide 1</div>
  <div>slide 2</div>
  <div>slide 3</div>
</div>

When adding the carrousel to the page, the page is rendering not like it supposed to. I find the following awkward behaviour: (1) The text in the slide is not showing up (2) Horizontal scroll bars are added to the page. (3) The animsition script added earlier shows that when the page is loaded the slides are positioned to the left of the page

When I open up the inspector in Chrome, I see the slick classes added to the HTML, and when I click previous and next, the classes switched like they are supposed to do. However, the information of the slides themselves are not showing up on my screen. Anybody any idea?

See the code of the index.html in my workspace: https://w.trhou.se/mu8xbst61b

Tested on a mac in: (a) Chrome 46.0.2490.13 beta (64-bit) (b) Firefox

Sean Ford
Sean Ford
9,581 Points

I'm having the same problem, with Chrome on Windows, please advise!!!

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man, Can you show the code where you have included the CDN/paths to the CSS and JS files? And, also the code you are using to initiate the slider :)

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

You need to include the slick CSS files, man :) I had a similar issue when I was using this plugin for a WordPress site I was building. It got overcomplicated as I was blaming the jQuery version packed with WordPress...it was a much simpler problem.

Just add the below code above your main style sheet and it should work :)

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Oh, I'd also recommend removing the slick.min.js from the top of the page, too :)

Bobby Verlaan
Bobby Verlaan
29,538 Points
Bobby Verlaan
Bobby Verlaan
29,538 Points

Hi Liam,

Thank you for pointing out! I indeed included the js file where I should have included the css file for markup purposes. I don't know how I could have missed such an elementary thing, so I feel very stupid now. However, thank you very much for pointing me to it! Now I can move on again! ;-)

Best, Bobby

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Haha! No problem, man. It happens. Like I said, I had the exact same problem =p

Glad I could help! :)

Bobby Verlaan
Bobby Verlaan
29,538 Points
Bobby Verlaan
Bobby Verlaan
29,538 Points

Hi Liam, thnks for reaching out. I've included the workspace with the actual code. Does that work for you? Best, Bobby

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Does this problem echo over other browsers at all?