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
Peaches Stubbs
21,320 PointsSlick plugin not working on my page.
Hi I am trying to use the jquerys plugin slick. I haven't had the best luck with plugins but I am following the information from the course. May someone please review my code and tell me where I have went wrong.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
<link rel="stylesheet" href="js/slick/slick.css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_bg">
<div id="header"><img src="images/mall_Header.jpg" width="100%" height="160" alt="This image is of a flamingo standing on one leg with the words , The Mall at Marathon on the flamingo. There is also a pink buidling with an entrance. The entrance doors appears to be glass, above the entrance the words The Mall at Marathon are there." /></div>
<div class="center_content" id="navBar">
<li><a href="index.html"> Home</a> <a href="#a">Merchant Listings</a> <a href="#a">Community</a> <a href="#a">Customer Service</a> <a href="#a">Marketing Calendar</a> <a href="#a">Leasing </a></li>
</div>
<div id="slider" class="slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>
Content for id "main_bg" Goes Here
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slick/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
$('.slider').slick();
</script>
</body>
</html>
Using this code the slider does show as it is supposed to. It is as if there is no jquery on the page at all. Thank you in advance for your help in this matter.
8 Answers
Máté Végh
25,607 PointsHi Peaches,
I've checked your code in CodePen and it does work for me. All I did was just changed the original file paths to CDN file paths. Therefore I assume that your file paths may be wrong, so you should double-check them.
Check it out here, is this still not working for you? If not, there must be some browser compatibility issue.
Tim Knight
28,888 PointsHi Peaches,
Would you mind posting the complete HTML that you're working with. Some times the smallest of details can make all the difference.
Peaches Stubbs
21,320 PointsYou are absolutely right Tim , my code is above.
Tim Knight
28,888 PointsThe first thing I can see is that you need to make sure to execute the plugin once the page is finished downloading. To do that just change:
<script>
$('.slider').slick();
</script>
To
<script>
$(function () {
$('.slider').slick();
});
</script>
Peaches Stubbs
21,320 PointsOkay I made that change but no effect. I'm reveiwing the video now to see if I missed anything.
Tim Knight
28,888 PointsYou might also consider checking out the plugin's documentation at https://kenwheeler.github.io/slick/#getting-started
Michael Armstrong
18,519 PointsHi
I've probably replied a bit late now but have you tried changing the class name from .slider to .slides.
In the workspaces files all of the css has been created for a div with the class name of slides.
Peaches Stubbs
21,320 PointsHi Micheal, nah your not late at all I had 2 put this down for a while and I'm gonna tackle this again in about an hour I will try this and see if it works. Thank you !
Brian Montana
22,445 PointsSo your main.css file path should be set to href="css/main.css" and your jquery version isn't the same that's used in the example. Should be src="js/jquery-1.11.2.min.js"