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 Add a Carousel to a Page

Add a Carousel to a page - not showing in browser correctly.

I've looked over this code and have tried to put in other suggestions I've seen on the forum. Is there an issue with instructions in the video not being correct?

<!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="css/main.css">

<!-- This line below was put in as a suggestion - it doesn't work--> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.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> <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 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>
    $(function () {
      ('.slides').slick();
    });
  </script>
</body>

</html>

What I see in my browser: https://drive.google.com/file/d/0B8n7r0e_fxmrTTNjWTNKTDJGR0U/view?usp=sharing

Browser: Chrome Version 46.0.2490.86 m

1 Answer

Greg Wild
Greg Wild
15,680 Points

By the looks of things, you're not wrapping your slides in the ".slides" div - you've got:

<div class="slides"></div>.

You want all those slide divs to be within that one :)

At least, I think that's the problem!

rydavim
rydavim
18,813 Points

I've changed your comment to an answer so that it may be voted on or marked as best answer.

I thought that was going to be it but nothing changed. Most of this is copy/paste and other parts of the same video didn't work either. Possibly something with the plugins in the video not being up to date with browser version.