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 The Carousel Challenge Solution

Julia Gron
Julia Gron
3,170 Points
Posted by Julia Gron
Julia Gron
3,170 Points

unable to make carousel work on sample page

I've done exactly the same steps as shown on the video for the solution to the challenge, but my carousel isn't appearing on the page. Could someone please take a look at my code and tell me why it isn't working?

<!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/slick/slick.css">
      <link rel="stylesheet" href="js/slick/slick-theme.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 id="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>

2 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Julia,

It could be something as simple as the fact that you do not have any elements with a class of "slides"; you have an element with an ID of "slides". In your jQuery, you're trying to target the class "slides" (i.e. $(".slides")), when you should be targeting the ID of "slides" (i.e. $("#slides")) or changing your div with the ID to a class.

Make that correction and see if you make any progress.

Erik

Julia Gron
Julia Gron
3,170 Points
Julia Gron
Julia Gron
3,170 Points

can't believe I missed that, thanks so much Erik!

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Absolutely (it's an easy mistake to make, and a tricky one to catch)! Happy coding!

Erik