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

Thomas Mason
Thomas Mason
12,768 Points
Posted by Thomas Mason
Thomas Mason
12,768 Points

Can't get slidesToShow: 4 to work... ='(

<!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>
        <div class="slides">
      <!-- slides go here-->
          <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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>


      <script>

        $(".slides").slick({
          fade:true,
          slidesToShow: 4,
          slidesToScroll: 4,
          autoplay:true,
          autoplaySpeed:2000,
          infinite: true,
          dots:true

        });

      </script>  
</body>

</html>

What am I doing wrong? https://w.trhou.se/ta4my7k1sk

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Thomas,

For some reason the "fade" option is preventing the display of 4 images at a time on the carousel. If you delete that option from the object-literal, the 4 images display perfectly.

Jason :)