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
Erik Young
15,016 PointsCan't understand why images are not displaying.
I've followed this video, but my answer is not nearly what the video has shown, would appreciate to better understand why.
5 Answers
Erik Young
15,016 Points<!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="css/main.css">
</head>
<body>
<div class="row">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo "></a>
</div>
<div class="grid-third tagline">
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="index.html">Home</a>
<a href="work.html">Work</a>
<a href="#" class="active">Team</a>
</nav>
</div>
</header><!--/header-->
<div class="main row">
<div class="grid-full">
<div class="team">
<h2>Meet the team</h2>
<h4>United we stand divided we fail</h4>
</div>
<!-- slides go here-->
<div class=data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> <div> <img src="img/team-members/team--01.png" alt="" class="avatar" /> <h3>Bill Bigsby IV</h3> <p>CEO</p> </div><!--/1--> <div> <img src="img/team-members/team--02.png" alt="" class="avatar" /> <h3>Jane Jewels</h3> <p>CFO</p> </div><!--/2--> <div> <img src="img/team-members/team--03.png" alt="" class="avatar" /> <h3>Doughy Digital</h3> <p>Lead Developer</p> </div><!--/3--> <div> <img src="img/team-members/team--04.png" alt="" class="avatar" /> <h3>Ralph Raider</h3> <p>Lead Designer</p> </div><!--/4--> <div> <img src="img/team-members/team--05.png" alt="" class="avatar" /> <h3>Nolan Nitro</h3> <p>Senior Developer</p> </div><!--/5--> <div> <img src="img/team-members/team--06.png" alt="" class="avatar" /> <h3>Donna Danger</h3> <p>Senior Developer</p> </div><!--/6--> <div> <img src="img/team-members/team--07.png" alt="" class="avatar" /> <h3>Rebecca Roo</h3> <p>Senior Designer</p> </div><!--/7--> <div> <img src="img/team-members/team--08.png" alt="" class="avatar" /> <h3>Lenny Lowes</h3> <p>Senior Designer</p> </div><!--/8--> <div> <img src="img/team-members/team--09.png" alt="" class="avatar" /> <h3>Eli Elfs</h3> <p>Designer</p> </div><!--/9--> <div> <img src="img/team-members/team--10.png" alt="" class="avatar" /> <h3>Trevor Tuesday</h3> <p>Junior Developer</p> </div><!--/10--> <div> <img src="img/team-members/team--11.png" alt="" class="avatar" /> <h3>Tori Traffic</h3> <p>Project Mangagement</p> </div><!--/11--> <div> <img src="img/team-members/team--12.png" alt="" class="avatar" /> <h3>Fido Fur</h3> <p>Office Manager</p> </div><!--/12-->
</div>
</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/slick/slick.min.js"></script>
<script>
$('.slides').slick({
dots:true,
slidesToShow: 4,
slidesToScroll:4
});
</script>
</body>
</html>
Emmanuel C
10,636 PointsThe div tag that has all the slides is suppose to have a class called "slides", that's what you use in the jquery. instead its named "<div class=data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>" , which actually was highlighted red in the work space. Giving that div tag a class of "slides" seemed to have fixed it.
Erik Young
15,016 Points<!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="css/main.css">
</head>
<body>
<div class="row">
<header class="row header">
<div class="grid-third">
<a href="index.html" class="logo "></a>
</div>
<div class="grid-third tagline">
<h1 class="description">We build apps</h1>
</div>
<div class="grid-third">
<nav>
<a href="index.html">Home</a>
<a href="work.html">Work</a>
<a href="#" class="active">Team</a>
</nav>
</div>
</header><!--/header-->
<div class="main row">
<div class="grid-full">
<div class="team">
<h2>Meet the team</h2>
<h4>United we stand divided we fail</h4>
</div>
<!-- slides go here-->
<div class="slides"> <div> <img src="img/team-members/team--01.png" alt="" class="avatar" /> <h3>Bill Bigsby IV</h3> <p>CEO</p> </div><!--/1--> <div> <img src="img/team-members/team--02.png" alt="" class="avatar" /> <h3>Jane Jewels</h3> <p>CFO</p> </div><!--/2--> <div> <img src="img/team-members/team--03.png" alt="" class="avatar" /> <h3>Doughy Digital</h3> <p>Lead Developer</p> </div><!--/3--> <div> <img src="img/team-members/team--04.png" alt="" class="avatar" /> <h3>Ralph Raider</h3> <p>Lead Designer</p> </div><!--/4--> <div> <img src="img/team-members/team--05.png" alt="" class="avatar" /> <h3>Nolan Nitro</h3> <p>Senior Developer</p> </div><!--/5--> <div> <img src="img/team-members/team--06.png" alt="" class="avatar" /> <h3>Donna Danger</h3> <p>Senior Developer</p> </div><!--/6--> <div> <img src="img/team-members/team--07.png" alt="" class="avatar" /> <h3>Rebecca Roo</h3> <p>Senior Designer</p> </div><!--/7--> <div> <img src="img/team-members/team--08.png" alt="" class="avatar" /> <h3>Lenny Lowes</h3> <p>Senior Designer</p> </div><!--/8--> <div> <img src="img/team-members/team--09.png" alt="" class="avatar" /> <h3>Eli Elfs</h3> <p>Designer</p> </div><!--/9--> <div> <img src="img/team-members/team--10.png" alt="" class="avatar" /> <h3>Trevor Tuesday</h3> <p>Junior Developer</p> </div><!--/10--> <div> <img src="img/team-members/team--11.png" alt="" class="avatar" /> <h3>Tori Traffic</h3> <p>Project Mangagement</p> </div><!--/11--> <div> <img src="img/team-members/team--12.png" alt="" class="avatar" /> <h3>Fido Fur</h3> <p>Office Manager</p> </div><!--/12-->
</div>
</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/slick/slick.min.js"></script>
<script>
$('.slides').slick({
dots:true,
slidesToShow: 4,
slidesToScroll:4
});
</script>
</body>
</html>
Erik Young
15,016 PointsI changed it but I still can't view the images at all.
Emmanuel C
10,636 PointsTry adding the links to the slicks style sheets. The slick.css and the slick-theme.css
Erik Young
15,016 PointsOk, that took care of it. Not sure why I didn't think of that. Thanks for your patience.
Emmanuel C
10,636 PointsEmmanuel C
10,636 PointsCan you post your code?