asp.net mvc 4 - Bootstrap 3 Picture Carousel Stop Sliding and after going back to the first picture -

asp.net mvc 4 - Bootstrap 3 Picture Carousel Stop Sliding and after going back to the first picture -

i have image carousel showing on sidebar section of page. carousel works fine when page first load, stops working after going first image of slide. missing here?

//loading jquery , bootstrap @ top of page <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="../../content/cosmo-boostrap.min.css" rel="stylesheet" /> <link href="@url.content("~/content/site.css")" rel="stylesheet" type="text/css" />

the side section code in html page:

<section id="sidebar" class="col-md-2"> <div id="addcarousel" class="carousel slide" data-ride="carousel" data-wrap="true"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#addcarousel" data-slide-to="0" class="active"></li> <li data-target="#addcarousel" data-slide-to="1"></li> <li data-target="#addcarousel" data-slide-to="2"></li> <li data-target="#addcarousel" data-slide-to="3"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <img src="../../images/adds/desert.jpg" alt="desert"> <div class="carousel-caption"> <h3>desert</h3> </div> </div> <div class="item"> <img src="../../images/adds/koala.png" alt="koala"> <div class="carousel-caption"> <h3>koala</h3> </div> </div> <div class="item"> <img src="../../images/adds/jellyfish.jpg" alt="jelly fish"> <div class="carousel-caption"> <h3>jelly fish</h3> </div> </div> <div class="item"> <img src="../../images/adds/tulips.jpg" alt="tulips"> <div class="carousel-caption"> <h3>tulips</h3> </div> </div> </div> <!-- controls --> @* <a class="left carousel-control" href="#carousel-example-generic" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a>*@ </div> <!-- carousel --> </section>

jquery function @ end of page:

<script> $('.carousel').carousel({ interval: 3000 }); </script>

after page load or refresh, carousel looks fine. see below pic:

after going first carousel, carousel shows 2 pictures , stop sliding. see pic below:

i removed javascript code below, , worked expected now.

<script> $('.carousel').carousel({ interval: 3000 }); </script>

twitter-bootstrap asp.net-mvc-4 carousel