Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou utilizando o Bootstrap para criar um template, estou tentando utilizar o "carousel" nativo do framework mas não estou conseguindo, ele não funciona já tentei de tudo.
Meu HTML
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" /></div>
<div class="item"><img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" /></div>
<div class="item"><img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" /></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>JS dentro do header
<script type="text/javascript">
$('.carousel').carousel()
</script>Seria se a class no HTML fosse myCarousel, myCarousel é a id.
você tentou fazer do jeito que eu te disse?
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>titulo1</h1>
<p class="lead">ddsd1s1d4sd4s4d4s4dsd</p>
<a class="btn btn-large btn-primary" href="#">Sub1</a></div>
</div>
</div>
<div class="item">
<img src="slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>titulo2</h1>
<p class="lead">ddddddddddddddddddddddddddddd</p>
<a class="btn btn-large btn-primary" href="#">Sub2</a></div>
</div>
</div>
<div class="item">
<img src="slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>titulo3</h1>
<p class="lead">ffffffffffffffffff</p>
<a class="btn btn-large btn-primary" href="#">Sub3</a></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>Também não funcionou.
Onde está o arquivo js? Certifique que ele vem depois dos outros. A pagina deve carregar primeiro o jquery.
Por exemplo:
<head>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="/assets/js/vendor/carousel.js.js"></script>
</head>O meu JQuery estava depois do script do Bootstrap, agora funcionou certinho, obrigado! :D
tenta assim