Carrocel

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Carrocel

Previous pageReturn to chapter overviewNext page

 

Tela

 

bootstrap7

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>

       

  </style>

</head>

<body>

  <div class="container">

      <div class="row">

          <div class="span12">

              <div id="carrocao" class="carousel slide" style="width: 765px">

                  <div class="carousel-inner">

                      <div class="item active">

                          <img src="http://market.com.br/img/banner/banner_coletor.jpg" alt="jojo" />

                          <div class="carousel-caption">

                              <h4>

                                   Titulo da imagem</h4>

                              <p>

                                   Descrição</p>

                          </div>

                      </div>

                      <div class="item">

                          <img src="http://market.com.br/img/banner/banner_gestor.jpg" alt="teste1" /></div>

                      <div class="item">

                          <img src="http://market.com.br/img/banner/banner_paf.jpg" alt="teste2" /></div>

                  </div>

                  <a class="carousel-control left" href="#carrocao" data-slide="prev">&lsaquo;</a>

                  <a class="carousel-control right" href="#carrocao" data-slide="next">&rsaquo;</a>

              </div>

          </div>

      </div>

  </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

<script language="javascript">

   $(document).ready(function () {

       $('.carousel').carousel({

           interval: 2000

       });

 

       $('#carrocao').hover(function () {

           $(this).carousel('pause')

       });

 

   });

</script>

</html>