Bootstrap Carrusel otro contenido que la imagen

Quiero usar el carrusel de arranque de twitter en un proyecto personal. Hasta ahora funciona muy bien porque uso el ejemplo de la página de arranque.Bootstrap Carrusel otro contenido que la imagen

Ahora quiero colocar contenido html simple en lugar de imágenes allí. Este contenido debería rotar de la misma manera que las imágenes. El texto que coloco se muestra en el título del carrusel y el texto que coloqué en el título del carrusel no se muestra.

Ejemplo:

<div class="item"> 
     This is the text or html code i want to place 
     <div class="carousel-caption"> 
      <h4>Thumbnail label</h4> 
      <p>Carousel caption text<p> 
     </div> 
    </div>

¿Hay una manera de conseguir este trabajo? Quizás hay una manera de declarar un tramo blanco con, por ejemplo, 300 x 300 px, donde puedo colocar algo de contenido.

Debe saber que yo en un nivel de principiante. Ahora estoy aprendiendo html, css, js, mongodb, bootstrap, node.js. Pero esto es un poco para mucho para mí ahora.

muchas gracias Daniel

Fuente

2012-08-11 Dan-De-Man

<head> 
    <style type="text/css"> 
    div.new_html_code { 
     width:150px; 
     height:100px; 
     min-width:150px; 
     min-height:100px; 
     max-width:200px; 
     max-height:100px; 
     overflow:hidden; 
     display:block; 
     border:1px solid red; 
    } 
    </style> 
</head> 
<body> 
<!-- 
some html stuff here, I am just giving the basic layout 
--> 
    <div class="item"> 
     <div class="new_html_code"></div> 
     <div class="carousel-caption"> 
      <h4>Thumbnail label</h4> 
      <p>Carousel caption text<p> 
     </div> 
    </div> 
</body>

Si ha sustituido HTML/CSS del carrusel y no son capaces de corregirlo, recuperar el material original . Luego, empiece a reemplazar lentamente con su código, y tenga mucho cuidado con los siguientes atributos CSS, no solo ayudan a encontrar errores (como los bordes CSS más útiles), sino que también ayudan a detener el contenido nuevo que se agrega, desde la distensión. anterior uno (atributos máximos de ancho/alto de CSS).

Ponga mucha atención a los siguientes CSS-atributos:

 min-width:150px; 
     min-height:100px; 
     max-width:200px; 
     max-height:100px; 
     overflow:hidden; 
     border:1px solid red;

No modificar los índices de z y la opacidad primer trabajo con las que he dado anteriormente, y después empezar a hacer cosas complejas, vuelva a preguntar si Tengo algunas dudas y lo siento por los errores tipográficos Tengo menos tiempo.

Fuente

2012-08-11 14:09:54 GLES

Hola Nina, esto es genial! :-) Exactamente lo que estaba buscando. Funciona. Lo modificaré un poco. Pero ahora creo que entiendo cómo colocar mis propios elementos en este sitio aunque use bootstrap. Pero eso es css :-) ¡Gracias! –

También voté mi respuesta si lo encuentras útil: D – GLES

Lo haría pero no puedo ... Porque necesito un poco de reputación ... –

Usted no cerró el div carousel-caption. Probablemente es tu problema Si observa la documentación del carrusel de arranque, no hay diferencia entre usar imágenes o texto dentro de cada elemento.

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item"><p>1</p></div> 
    <div class="item"><p>2</p></div> 
    <div class="item"><p>3</p></div> 
    </div> 
<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

Mira el comportamiento de este código en jsFiddle: http://jsfiddle.net/QYFa2/

Fuente

2012-08-11 13:15:34 Pigueiras

Lo siento! Perdí la etiqueta de cierre al copiar el texto en la pregunta. Mi código fuente es válido. Ok, borré el título del carrusel como dijiste y ahora puedo ver el texto que escribí. El problema es que todo el sitio está perdiendo su "forma". Los siguientes elementos no permanecerán en su lugar y destruirán el diseño. ¿Hay alguna manera de evitarlo? Gracias –

Quizás puedo darle un alto y una frontera o algo así. –

Rondell puede ser un complemento de jQuery para mostrar galerías y contenido diferente, el enfoque que desee.

View Demo que tengo uso de este plugin es bastante fácil de usar, descargar Source Code

Fuente

2013-11-05 18:15:56 user2957535

Parece que Tenían prisa, se olvidó de publicar el enlace completo! – Mutant

(enlace faltante fijo) – rtpHarry

La clase carousel-caption es malo para usted. No lo use si no quiere mostrar imágenes y está bien. Incluso es semánticamente incorrecto definir el contenido html como , título. Acaba de salir de la clase de distancia y el uso de una llanura div

<div> 
    <h4>Thumbnail label</h4> 
    <p>Carousel caption text<p> 
</div>

también estas sombras suaves desaparecerán a continuación. Y eso es bueno, ya que no los queremos en texto puro (aunque pueden verse bien en las imágenes).

Fuente

2014-08-27 19:58:58 schmijos

@GLES hay un método muy simple para usar el carrusel sin ninguna imagen. En realidad, la propiedad de posición de .carousel-caption estaba causando el problema. Basta con establecer que a estática