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 Using jQuery Plugins Using a jQuery Carousel The Carousel Challenge Solution

Can'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.

Emmanuel C
Emmanuel C
10,634 Points

Can you post your code?

5 Answers

<!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
Emmanuel C
10,634 Points

The 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.

<!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>

I changed it but I still can't view the images at all.

Emmanuel C
Emmanuel C
10,634 Points

Try adding the links to the slicks style sheets. The slick.css and the slick-theme.css

Ok, that took care of it. Not sure why I didn't think of that. Thanks for your patience.