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 Bootstrap Building a Carousel

Gesang Lamu
Gesang Lamu
2,742 Points
Posted by Gesang Lamu
Gesang Lamu
2,742 Points

carousel slides overlapping

my carousel is sliding but the problem is, the slides overlap when I click for the next the previous is there(I wish I can attach a screen shot here)

here is a link to my site temporarily hosted on dropbox, if you look at the console,it gives you Jquery error and the slide doesn't even slide

https://dl.dropboxusercontent.com/u/29513364/start/index.html#myCarousel

However, on my local file, it does slide but overlaps and the console give no error. I am confused, hope the question is not confusing.

code copied below, many thanks!!

<!DOCTYPE html> <html> <head> <title>Ribbit - A Treehouse 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-style.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> <!-- navnar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container">

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapes">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>

   <a class="navbar-brand text-muted" href="#">Rabbit</a>
   <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About Ribbit</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a>

        <ul class="dropdown-menu">
          <li><a href="#">Home sajd</a></li>
          <li><a href="#">Home wewe</a></li>
          <li><a href="#">Home wegw</a></li>
          <li class="divider"></li>
          <li><a href="#">Plan &amp; Pricing</a></li>

        </ul>

      </li>
    </ul>
   </div>

 </div>

</div> <!-- end navnar -->

<!-- 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! We'll teach you how to build both apps from scratch!</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 make IOS</h1>
          <p class="lead"> we iil teach you how to mahe gfrom assxra</p>
        <p>
          <a class="btn btn-success btn-lg" href="#">Get started today</a>
        </p>
      </div>


      <div class="item">
        <h1>Learn to build Android</h1>
          <p class="lead"> we iwll reach you how to make tit from sctah</p>
        <p>
          <a class="btn btn-success btn-lg" href="#">Get atarted 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 -->

<div class="container">



<div class="row">
  <div class="col-sm-4">
    <b class="glyphicon glyphicon-camera"></b>
    <h2>jasd jshdh uyw kjd adsj </h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>

  <div class="col-sm-4">
    <b class="glyphicon glyphicon-user"></b>
    <h2>jasd jshdh uyw kjd adsj </h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>

  <div class="col-sm-4">
    <b class="glyphicon glyphicon-cloud"></b>
    <h2>jasd jshdh uyw kjd adsj</h2>
    <p>kh hdf d iudjd  id odf ifn qok ynw pwky ahfdfh
      kdfhdfd skfd fd fhsf dskfhd fd  fhfdfh d fhfh df kdfhdf ddfh dwih wqp yern wiurn pwfn krrh wiu  wruuw ehrehr </p>
  </div>
</div>

<hr>

<div class="row">
  <div class="col-sm-6 hidden-xs">
    <h3>jas shdhs shdhd iwew hwehe wie </h3>
    <p>wewu iwew iwyeyw  wye ewiw eyw w iyweyw  ew eyw we wue weuweyw 
      hsh  whe wheh wje ehwehw he ihg wj uyh qok uwiq ihggw ihet wjw
      wjwhehw  whehwe </p>

  <div class="row">
    <div class="col-sm-6 col-md-push-6">
      <img class="img-responsive" src="img/decoration.jpg">
    </div>

    <div class="col-sm-6 col-md-pull-6">
      <p> Get access to these course for only 24$ a month</p>
      <a href="#"> visit treehoust &raquo;</a>
    </div>
  </div>
  </div>

  <div class="col-sm-6">
    <h3>jas shdhs shdhd iwew hwehe wie</h3>
    <p>wewu iwew iwyeyw  wye ewiw eyw w iyweyw  ew eyw we wue weuweyw 
      hsh  whe wheh wje ehwehw he ihg wj uyh qok uwiq ihggw ihet wjw
      wjwhehw  whehwe</p>
      <a href="#">Sign up for Treehouse&raquo;</a>
  </div>
</div>




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

</body> </html>

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Gesang,

Could you download the jquery file and attach it to your html, dropbox wont allow an external link if it isnt https.

Or you could just create a workspace and copy all the code there.

Gesang Lamu
Gesang Lamu
2,742 Points
Gesang Lamu
Gesang Lamu
2,742 Points

you are right! I just tried what you said, now you can see the problem at this link, slide only works one direct now and you have to refresh every time for that one to work. Do you know what might went wrong, I watched the video like 3 times, no clue...

https://dl.dropboxusercontent.com/u/29513364/start/index.html#myCarousel

Many thanks!

2 Answers

Davide Pugliese
Davide Pugliese
4,091 Points
Davide Pugliese
Davide Pugliese
4,091 Points

Hello, I had a quick look at your code and I found this:

<div class"item active"> it should be <div class="item active">

However, as the moderator said, you should put your page somewhere else, a Workspace would be great, because the browser still says

This request has been blocked; the content must be served over HTTPS.

Cheers,

Davide

Gesang Lamu
Gesang Lamu
2,742 Points
Gesang Lamu
Gesang Lamu
2,742 Points

Thanks!!! that solved the carousel problem, I keep making this kind of mistake even I thought I checked multiple times, do ppl ever get better at it as they become more experienced? haha.... any tips and advice?!

Davide Pugliese
Davide Pugliese
4,091 Points
Davide Pugliese
Davide Pugliese
4,091 Points

I would suggest you to use some IDE like Netbeans, if it does not overload your computer, with code completion and syntax highlight, this reduces the odds of making typos.

Sublimetext is also an option if you do not have much RAM on your computer, but it becomes a little bit of an hassle when you want to manage different projects or when you want to try something more advanced like building apps.