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
shirshah sahel
10,035 PointsAfter adding object literals to plugin file in index.html. Carousel is not working properly.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agency - A Treehouse template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="js/slick/slick.css">
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="row container animsition">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo"></a>
</div>
<div class="grid-third">
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="#" class="active">Home</a>
<a href="work.html" >Work</a>
<a href="team.html" >Team</a>
</nav>
</div>
</header><!--/header-->
<div class="row">
<div class="grid-full">
<!-- carousel goes here -->
<div class="slides">
<div class="slide blue">
<div class="grid-half">
<h2>DailyFeed</h2>
<p>Your number one podcast app</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-dailyFeed.png" alt="" />
</div>
</div><!--/Slide 1-->
<div class="slide orange">
<div class="grid-half">
<h2>ChitChat</h2>
<p>The worldest easiest to use cross device chat app</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-chitChat.png" alt="" />
</div>
</div><!--/Slide 2-->
<div class="slide green">
<div class="grid-half">
<h2>MixTape</h2>
<p>An app to search, create and share mixtapes</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-mixTape.png" alt="" />
</div>
</div><!--/Slide 3-->
<div class="slide yellow">
<div class="grid-half">
<h2>KITT</h2>
<p>Turn your car into KITT from Knight Rider</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-Kitt.png" alt="" />
</div>
</div><!--/Slide 4-->
</div>
</div>
<div class="main row">
<div class="grid-third">
<img src="img/sticker-team.png" alt="" />
<p>United we stand divided we fail. Meet the all star team behind the agency.</p>
<a href="team.html" class="button">Meet the Team</a>
</div><!--/team-->
<div class="grid-third">
<img src="img/sticker-work.png" alt="" />
<p>Check our latest app builds or download them in the App Store.</p>
<a href="work.html" class="button">Latest Projects</a>
</div><!--/work-->
<div class="grid-third">
<img src="img/sticker-contact.png" alt="" />
<p>Have questions or requests? Feel free to contact us, we’d love hear from you.</p>
<a href="#" class="button">Contact Us</a>
</div><!--/contact-->
</div>
</div><!--/main-->
<footer>
<div class="row">
<div class="grid-full">
<p>Connect with us</p>
<ul class="social">
<li>
<a href="#" class="pink"></a>
<a href="#" class="light-blue"></a>
<a href="#" class="dark-blue"></a>
</li>
</ul>
</div>
</div>
</footer><!--/footer-->
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<script src="js/sticky/jquery.sticky.js"></script>
<script src="js/slick/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
$('.slides').slick(
fade: true,
autoplay: true,
arrows: false,
dots: true
);
</script>
</body>
</html>
3 Answers
Steven Parker
231,269 PointsThere's not enough code included to replicate the issue, but at first glance it appears that the braces needed to define the argument to slick as an object literal are missing. Perhaps this might resolve the issue:
$('.slides').slick({ // brace added
fade: true,
autoplay: true,
arrows: false,
dots: true
}); // brace added
shirshah sahel
10,035 PointsThanks steven after adding the braces it works fine. I will also add the link to workspace. https://teamtreehouse.com/workspaces/31217432.
Steven Parker
231,269 PointsFor future reference, that's a direct URL to your workspace, it's temporary and only exists while you are using it.
But you can use the snapshot function in the workspace and provide the link to that for sharing.
shirshah sahel
10,035 Pointshttps://w.trhou.se/10ymkwyazt . Im going to try again . is this link working?
Steven Parker
231,269 PointsYes, that is a good snapshot link.
Steven Parker
231,269 PointsSteven Parker
231,269 PointsThis code requires several JS components to operate and demonstrate the issue. You can make a snapshot of your workspace and post the link to it here to facilitate analysis.