Thnaks a lot, it works, can you give me a little description of the
solution?
El miércoles, 2 de mayo de 2012 15:06:17 UTC-5, Cristian Guerra escribió:
>
> Hello there!
> I had your same problem and found the solution;
> As we both put the javascripts at the end of the page, the calling of the
> function must be put after them:
>
> <!-- Javascript placed at the end of the document so the pages load faster
>>> -->
>>
>> <script src="bootstrap/jquery.js"></script>
>>
>> <script src="bootstrap/bootstrap.js"></script>
>>
>> <script src="bootstrap/bootstrap-alert.js"></script>
>>
>> <script src="bootstrap/bootstrap-carousel.js"></script>
>>
>> <script src="bootstrap/bootstrap-transition.js"></script>
>>
>>
>>> <script type="text/javascript">
>>
>> $('.carousel').carousel({
>>
>> interval: 3000
>>
>> })
>>
>> </script>
>>
>>
> Hope this helps you!
>
>
> On Tuesday, April 3, 2012 10:04:31 AM UTC+2, Barry vd. Heuvel wrote:
>>
>> http://twitter.github.com/bootstrap/javascript.html#carousel
>> Using bootstrap-carousel.js
>>
>> Call via javascript:
>>
>>
>> 1.
>> $('.carousel').carousel()
>>
>>
>> On Tue, Apr 3, 2012 at 04:50, Kevan <[email protected] <javascript:>>wrote:
>>
>>> I am trying to use the Carousel on Bootstrap. It loads, looks ok but
>>> it doesn't cycle at first. If I click and arrow to advance to image
>>> #2, it begins cycling automatically just as it is supposed to do.
>>> However if I do not hit the arrow, it just sits there statically. I
>>> have copied my code below.
>>>
>>> Does anyone have any guesses? Thanks!
>>>
>>> (By the way, I know the layout of the page is a little off. I had not
>>> gotten there yet.)
>>>
>>>
>>> <!DOCTYPE html>
>>> <html lang="en">
>>> <head>
>>> <meta charset="utf-8">
>>> <title>Bootstrap, from Twitter</title>
>>> <meta name="viewport" content="width=device-width, initial-
>>> scale=1.0">
>>> <meta name="description" content="">
>>> <meta name="author" content="Admin" >
>>>
>>> <!-- Le styles -->
>>> <link href="css/bootstrap.css" rel="stylesheet">
>>> <style type="text/css">
>>> body {
>>> padding-top: 60px;
>>> padding-bottom: 40px;
>>> }
>>> </style>
>>> <link href="css/bootstrap-responsive.css" rel="stylesheet">
>>>
>>>
>>> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
>>> <!--[if lt IE 9]>
>>> <script src="http://html5shim.googlecode.com/svn/trunk/
>>> html5.js"></script>
>>> <![endif]-->
>>>
>>> <!-- Le fav and touch icons -->
>>> <link rel="shortcut icon" href="../assets/ico/favicon.ico">
>>> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../
>>> assets/ico/apple-touch-icon-114-precomposed.png">
>>> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../
>>> assets/ico/apple-touch-icon-72-precomposed.png">
>>> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-
>>> touch-icon-57-precomposed.png">
>>> </head>
>>>
>>> <body>
>>>
>>> <div class="navbar navbar-fixed-top">
>>> <div class="navbar-inner">
>>> <div class="container">
>>> <a class="btn btn-navbar" data-toggle="collapse" data-
>>> target=".nav-collapse">
>>> <span class="icon-bar"></span>
>>> <span class="icon-bar"></span>
>>> <span class="icon-bar"></span>
>>> </a>
>>> <a class="brand" href="#">Project name</a>
>>> <div class="nav-collapse">
>>> <ul class="nav">
>>> <li class="active"><a href="#">Home</a></li>
>>> <li><a href="#about">About</a></li>
>>> <li><a href="#contact">Contact</a></li>
>>> </ul>
>>> </div><!--/.nav-collapse -->
>>> </div>
>>> </div>
>>> </div>
>>>
>>> <div class="container">
>>>
>>> <!-- Image slider
>>> ===============================-->
>>>
>>> <div id="myCarousel" class="carousel">
>>> <!-- Carousel items -->
>>> <div class="carousel-inner">
>>> <div class="active item"><img src="img/carousel/dog1a.jpg"></div>
>>> <div class="item"><img src="img/carousel/dog2a.jpg"></div>
>>> <div class="item"><img src="img/carousel/dog3a.jpg"></div>
>>> </div>
>>> <!-- Carousel nav -->
>>> <a class="carousel-control left" href="#myCarousel" data-
>>> slide="prev">‹</a>
>>> <a class="carousel-control right" href="#myCarousel" data-
>>> slide="next">›</a>
>>> </div>
>>>
>>> <script type="text/javascript">
>>> $('.carousel').carousel({
>>> interval: 1000
>>> })
>>> </script>
>>>
>>> </script>
>>>
>>>
>>> <!-- End Image slider
>>> ===============================-->
>>> <!-- Example row of columns -->
>>> <div class="row">
>>> <div class="span4">
>>> <h2>Heading</h2>
>>> <p>Lorem Ipsum is simply dummy text of the printing and
>>> typesetting industry. Lorem Ipsum has been the industry's standard
>>> dummy text ever since the 1500s, when an unknown printer took a galley
>>> of type and scrambled it to make a type specimen book. It has survived
>>> not only five centuries, but also the leap into electronic
>>> typesetting, remaining essentially unchanged. </p>
>>> <p><a class="btn" href="#">View details »</a></p>
>>> </div>
>>> <div class="span4">
>>> <h2>Heading</h2>
>>> <p>Lorem Ipsum is simply dummy text of the printing and
>>> typesetting industry. Lorem Ipsum has been the industry's standard
>>> dummy text ever since the 1500s, when an unknown printer took a galley
>>> of type and scrambled it to make a type specimen book. It has survived
>>> not only five centuries, but also the leap into electronic
>>> typesetting, remaining essentially unchanged. </p>
>>> <p><a class="btn" href="#">View details »</a></p>
>>> </div>
>>> <div class="span4">
>>> <h2>Heading</h2>
>>> <p>Lorem Ipsum is simply dummy text of the printing and
>>> typesetting industry. Lorem Ipsum has been the industry's standard
>>> dummy text ever since the 1500s, when an unknown printer took a galley
>>> of type and scrambled it to make a type specimen book. It has survived
>>> not only five centuries, but also the leap into electronic
>>> typesetting, remaining essentially unchanged. </p>
>>> <p><a class="btn" href="#">View details »</a></p>
>>> </div>
>>> </div>
>>>
>>> <hr>
>>>
>>> <footer>
>>> <p>© Company 2012</p>
>>> </footer>
>>>
>>> </div> <!-- /container -->
>>>
>>> <!-- Le javascript
>>> ================================================== -->
>>> <!-- Placed at the end of the document so the pages load faster --
>>> >
>>> <script src="js/jquery.js"></script>
>>> <script src="js/bootstrap-transition.js"></script>
>>> <script src="js/bootstrap-alert.js"></script>
>>> <script src="js/bootstrap-modal.js"></script>
>>> <script src="js/bootstrap-dropdown.js"></script>
>>> <script src="js/bootstrap-scrollspy.js"></script>
>>> <script src="js/bootstrap-tab.js"></script>
>>> <script src="js/bootstrap-tooltip.js"></script>
>>> <script src="js/bootstrap-popover.js"></script>
>>> <script src="js/bootstrap-button.js"></script>
>>> <script src="js/bootstrap-collapse.js"></script>
>>> <script src="js/bootstrap-carousel.js"></script>
>>> <script src="js/bootstrap-typeahead.js"></script>
>>>
>>> </body>
>>> </html>
>>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
