I could be wrong, but it looks to me like you're trying to initialise the
carousel before it's actually loaded. I know you've put it in a document
ready, but have you tried putting that JS after referencing carousel.js?
On Friday, December 14, 2012 2:22:12 AM UTC, Sajan Maharjan wrote:
>
> Dear All,
>
> I have been trying to use carousel for sliding images in twitter
> bootstrap, but it doesn't seem to be working. I have included the js plugin
> for carousel. Could anybody explain it to me, what the problem is??? Your
> help will be greatly appreciated
>
> Thank You!!!
>
> P.S.
> Here is the source code that I wrote using the youtube tutorial of twitter
> bootstrap:
>
> <html>
> <head>
> <link type="text/css" rel="stylesheet"
> href="bootstrap/docs/assets/css/bootstrap.css" />
> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
> "></script>
> <script type="text/javascript">
> $(document).ready(function(){
> $('.carousel').carousel({
> interval:2000
> });
> });
> </script>
> </head>
> <body>
> <div class="container">
> <div class="row">
> <div class="span8 well">
> <div id="mycarousel" class="carousel">
> <center>
> <div class="carousel-inner">
> <div class="item"><img src="img1.jpg"></div>
> <div class="item"><img src="img2.jpg"></div>
> <div class="item"><img src="img3.jpg"></div>
> <div class="item active"><img src="img4.jpg"></div>
> <div class="item"><img src="img5.jpg"></div>
> <div class="item"><img src="img6 .jpg"></div>
> </div>
> </center>
> <a class="carousel-control left" href="#mycarousel"
> data-slide="prev">‹</a>
> <a class="carousel-control right" href="#mycarousel"
> data-slide="next">›</a>
> </div>
> </div>
> </div>
> </div>
> <script src="bootstrap/js/carousel.js"></script>
> </body>
> </html>
>
>
