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

CSS Framework Basics Prototyping with Foundation Building a JavaScript Dropdown Menu and Orbit Slider

Posted by jornemoonen
jornemoonen
6,616 Points

Orbit slider won't appear/work?

Why won't data-orbit work if I add it to the element?

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/foundation.css" rel="stylesheet" media="screen">
    <link href="css/custrom.css" rel="stylesheet" media="screen">
    <script src="js/vendor/custom.modernizr.js"></script>
  </head>
  <body>

    <!-- Navigation -->
    <div class="contain-to-grid fixed">    
      <nav class="top-bar">
        <ul class="title-area">
          <li class="name">
            <h1>
              <a href="#">Ribbit</a>
            </h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>
        <section class="top-bar-section">
          <ul class="right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="has-dropdown">
              <a href="#">Treehouse</a>
              <ul class="dropdown">
                <li><a href="#">About Treehouse</a></li>
                <li><a href="#">Video Libary</a></li>
                <li><a href="#">Tracks</a></li>
                <li class="divider"></li>
                <li><a href="#">Plans &amp; Pricing</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div>
    <!-- End Navigation -->

    <!-- Content Slider -->
    <div class="row">
      <div class="large-12 columns" data-orbit> 
        <div>
          <h1>Self-destructing message app</h1>
          <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today.</p>
          <p class="button-group radius">
            <a class="medium button success" href="#">Download the app</a>
            <a class="medium button">Text me the link</a>
          </p> 
        </div>
        <div>
          <h1>Learn how to build it for iOS</h1>
          <p class="lead">We'll teach you how to build it from scratch!</p>
          <p><a class="medium button radius" href="#">Get started today!</a>   
        </div>
        <div>
          <h1>Learn how to build it for Android</h1>
          <p class="lead">We'll teach you how to build it from scratch!</p>
          <p><a class="medium button radius" href="#">Get started today!</a></p> 
        </div>
      </div>
    </div>
    <!-- End Content Slider -->

    <script>
      document.write('<script src=' +
      ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
      '.js><\/script>')
    </script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>  
  </body>
</html>

/* Layout
========================*/

.orbit-container {
  text-align: center;
}

1 Answer

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

Have you got the required markup? The foundation docs state that you need this markup as the base wrapper:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> </div>

See: http://foundation.zurb.com/sites/docs/orbit.html

Also a css file in the head is named 'custrom', maybe you intended that to be 'custom'.