Carousel con Twitter Bootstrap

Código de ejemplo para construir un Slide de imagenes con el Framework Twitter Bootstrap:

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="utf-8">
        <title>Twitter BootStrap</title>
        <link href="bootstrap.css" rel="stylesheet">
        <style>
            body {margin-top: 70px;}
        </style>
    </head>

    <body>
        <div class="container well">
            <div class="row">
                <div class="span12">
                    <div id="homeCarousel" class="carousel slide">
                        <div class="carousel-inner">

                            <div class="active item">
                                <img src="image1.jpg">
                                <div class="carousel-caption">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <p><a class="btn btn-success btn-large">M&aacute;s informaci&oacute;n</a></p>
                                </div>
                             </div>

                             <div class="item">
                                 <img src="image2.jpg">
                                 <div class="carousel-caption">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                     <p><a class="btn btn-warning btn-large">M&aacute;s informaci&oacute;n</a></p>
                                 </div>
                             </div>

                             <div class="item">
                                 <img src="image3.jpg">
                                 <div class="carousel-caption">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                     <p><a class="btn btn-primary btn-large">M&aacute;s informaci&oacute;n</a></p>
                                 </div>
                             </div>

                        </div>
                        <a class="carousel-control left" href="#homeCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#homeCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                </div>
            </div>
        </div>

        <script src="jquery-1.7.2.min.js"></script>
        <script src="bootstrap.min.js"></script>
    </body>
</html>

Resultado:

Fuente:
http://twitter.github.com/bootstrap/javascript.html#carousel

Acerca de Moycas
Developer Web @moycc

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: