Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ricardo Barantini

Módulo "Carrossel" do Bootstrap do Twitter

Por , em Desenvolvimento frontend

Recommended Posts

Ricardo Barantini    33

Ricardo Barantini
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

mais aqui tah errado <script type="text/javascript">

$('.carousel').carousel()

</script>

 

 

tenta assim

 

 

<script type="text/javascript">

$('.myCarousel').carousel()

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Morejon    2

Bruno Morejon
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito