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

General Discussion

Posted by Jason Weissman
Jason Weissman
Courses Plus Student 1,220 Points

Carousel issues with bootstrap, please help

Im building the collapsing website app with bootstrap... I'm at part where we implement the carousel feature...

My carousel doesn't fuction when I hit left but works properly when I hit right... Im guessing their is no content to the left for some reason but I'm confused why.... my code is below.. if someone can help I'd appreciate... thank you in advance.

    <div id="myCarousel" class="carousel slide jumbotron">
      <div class="container">
        <ol class="carousel-indicators">
          <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">

             <div class="item active">
                  <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="btn-group">
                    <a class="btn btn-success btn-lg" href="#">Download the app</a>
                    <a class="btn btn-default btn-lg hidden-xs" href="#"> Text me the link </a>
                  </p>
             </div>

             <div class="item">
               <h1>Learn how to built it for Iod</h1>
               <p class="lead"> well teach you hot o blah blah blah</p>
               <p>
                 <a class="btn btn-success btn-lg" href="#">Get started today</a>
               </p>
             </div>

             <div class="item">
              <h1>Learn how to build it for android</h1>
               <p class ="lead">We'll teach you hot to build it from scratch</p>
                  <a class="btn btn-success btn-lg" href="#"> Get started today</a>
               </p>
             </div>
        </div>
      </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>

    </div>

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I pasted in your HTML and linked the bootstrap CSS & JS and it looks like it works to me.

http://codepen.io/jamesbarnett/pen/eEyBm

Jason Weissman
PLUS
Jason Weissman
Courses Plus Student 1,220 Points
Jason Weissman
Jason Weissman
Courses Plus Student 1,220 Points

Its not working on mine for some reason, im using google chrome..... the issues I notice are:

1) when I go left the whole carousel dissapears and becomes in active 2) for some reason my wording in that active and first slide is a clickable link when it is supposed to be a heading 3) .. and my new issue now that I've added modal... nothing on my website can be seen until the modal is open...

below im providing the link to all of my code for the site rather then just a piece, maybe you can help me find the errors? I've gone through multiple times and everything matches up with his instructions in video so don't know what is wrong

<!DOCTYPE html> <html> <head> <title>Dream Website Project</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <link href="css/my-styles.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> </head> <body> <!--Change navbar color --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!--Make navbar see and collapse in small view--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    <a class="navbar-brand text-muted" href="#">Dream Promotions</a>
    <div class="collapse navbar-collapse">
         <!--Navbar menu items-->
     <ul class="nav navbar-nav navbar-right">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">About Dream</a></li>
        <li class="dropdown"> <!--Dropdown box link n items-->
         <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">About Dream</a></li>
              <li><a href="#">About Dream</a></li>
              <li><a href="#">About Dream</a></li>
              <li class="divider"></li>
              <li><a href="#">plans &amp; pricing</li>
            </ul>
        </li>
      </ul>

    </div>
  </div>
</div> <!-- End navbar -->

<!--Carousel -->
<div id="myCarousel" class="carousel slide jumbotron">
  <div class="container">
    <ol class="carousel-indicators">
      <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">

         <div class="item active">
              <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="btn-group">
                <a class="btn btn-success btn-lg" href="#">Download the app</a>
                <a class="btn btn-default btn-lg hidden-xs" data-toggle="modal" href="#textModal"> Text me the link </a>
              </p>
         </div>

         <div class="item">
           <h1>Learn how to built it for Iod</h1>
           <p class="lead"> well teach you hot o blah blah blah</p>
           <p>
             <a class="btn btn-success btn-lg" href="#">Get started today</a>
           </p>
         </div>

         <div class="item">
          <h1>Learn how to build it for android</h1>
           <p class ="lead">We'll teach you hot to build it from scratch</p>
              <a class="btn btn-success btn-lg" href="#"> Get started today</a>
           </p>
         </div>
    </div>
  </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>

</div>

<!--End Carousel -->

<!--Modal -->
<div class="modal fade" id="textModal">
  <div class ="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times:</button>
      <h4 class="modal-title">We'll text you the link!</h4>
      </div>

      <div class="modal-body">

      </div>
  </div>
</div>
<!-- End Modal -->


<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <b class="glyphicon glyphicon-camera"></b>
      <h2>Delete photo &amp; video based on a timer</h2>
      <p>Learn how to write the code that downloads and displays videos that timeout after a few seconds. Then create the back-end to make them "self destruct." </p>
    </div>

    <div class="col-sm-4"> 
      <b class="glyphicon glyphicon-user"></b>
      <h2>Build an easily manages friends list</h2>
      <p>Learn what parse.com offers as a "backend-as-a-service platform. Explore the user account management APIs provided by Parse.com and write the code to create and save new user in a Parse.com data store.</p>
    </div>

    <div class="col-sm-4"> 
      <b class="glyphicon glyphicon-cloud"></b>
      <h2>Store &amp; retrieve data using cloud servers</h2>
      <p>We'll teach you hot to upload images, video files, and messages to parse.coms cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p>
    </div>
  </div>
  <hr>


  <div class="row">
    <div class="col-sm-6 hidden-xs">
      <h3>Learn how to make this app</h3>
      <p>We will build on the concepts learned in previous i0s projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed.</p>

      <div class="row">
        <div class="col-sm-6 col-md-push-6">
          <img class="img-responsive"src="file:///C:/Users/Jason/Desktop/1509176_10152086859189590_398787430_n.jpg">
        </div>
        <div class="col-sm-6 col-md-pull-6">
          <p>Get access to these courses for only 24 a month!</p>
          <a href="#">Visist Dream Now &raquo;</a>
        </div>
      </div>

    </div>

    <div class="col-sm-6">
      <h3>About Dream</h3>
      <p>Dream provides an extensive library of step-by-step video courses and training exercises that will give you a wide range of in-damand technology skills that will help you land your next dream job.</p>
    </div>
  </div>





  <hr>
  <div>
    <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p>
  </div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body> </html>