Carousel is not working properly - html

Question

I have written the following code for carousel. First problem faced that I could not find the slide class with carousel, kindly tell me where it occur.Second, it shows First image properly, but no sliding occur after that. In last sliding glyphicons are also not working.
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/dog1.jpg" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/cat.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/parrots.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/dog2.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
is my code right or i'm missing something?

Answer 1

wrong spelling for carousel on multiple occations. Here is a fiddle for your code which seems to work. Did you import bootstrap?
Changed the images though:
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7f/Terrestrial_planets_size_comparison.png" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/1e7m_comparison_Uranus_Neptune_Sirius_B_Earth_Venus.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Planets_everywhere_(artist%E2%80%99s_impression).jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Answer 2

There was a problem with my jQuery version. i have installed jQuery v1.1.9 and bootstrap v3.3.1 don't support it. That's why slide class was also missing. Now i updated my jQuery version ti v2.1.3
the bootstrap v3.3.1 works fine with it. so problem is solved.