Bootstrap Carousel altro contenuto dell'immagine

Desidero utilizzare il carosello di bootstrap di Twitter in un progetto personale. Finora funziona molto bene perché uso l'esempio della homepage di bootstrap.Bootstrap Carousel altro contenuto dell'immagine

Ora voglio inserire semplici contenuti HTML anziché immagini lì. Questo contenuto dovrebbe quindi ruotare allo stesso modo delle immagini. Il testo che inserisco è mostrato nella didascalia del carousel e il testo che ho inserito nella didascalia della carousel non viene visualizzato.

Esempio:

<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>

C'è un modo per ottenere questo lavoro? Forse c'è un modo per dichiarare una campata bianca con dire 300 x 300 px dove posso inserire del contenuto.

Si dovrebbe sapere che io a livello principiante. Ora sto imparando html, css, js, mongodb, bootstrap, node.js. Ma questo è un po 'troppo per me ora.

molte grazie Daniel

fonte

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>

Se è stato sostituito html/css da giostra e non sono in grado di correggerlo, tornare la roba originale . Quindi inizia lentamente a sostituire con il tuo codice, e stai molto attento con i seguenti attributi css, non solo aiutano a trovare errori (come i bordi css più utili), ma aiutano anche a fermare il nuovo contenuto che viene aggiunto, dal gonfiore quello precedente (attributi max css larghezza/altezza).

Prestare particolare attenzione ai seguenti CSS-attributi:

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

Non modificare i z-indici e opacità primo lavoro con quelli che ho dato sopra e poi iniziare a fare cose complesse, chiedere di nuovo se si ho qualche dubbio e mi dispiace per gli errori di battitura, ho meno tempo.

fonte

2012-08-11 14:09:54 GLES

Ciao Nina, questo è fantastico! :-) Esattamente quello che stavo cercando. Funziona. Lo modificherò un po '. Ma ora penso di capire come posizionare i miei elementi in questo sito anche se utilizzo il bootstrap. Ma questo è css :-) Grazie! –

Anche la mia risposta se la trova utile: D – GLES

Vorrei ma non sono in grado di ... Perché ho bisogno di una certa reputazione ... –

Non ha provveduto a chiuderla carousel-caption div. Probabilmente è il tuo problema. Se si guarda la documentazione del carosello di bootstrap, non c'è differenza tra l'uso di immagini o testo all'interno di ciascun 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>

Osservare il comportamento di questo codice nella jsfiddle: http://jsfiddle.net/QYFa2/

fonte

2012-08-11 13:15:34 Pigueiras

Mi dispiace! Ho perso il tag di chiusura copiando il testo nella domanda. Il mio codice sorgente è valido. Ok, ho cancellato la didascalia del carousel come hai detto e ora posso vedere il testo che ho digitato. Il problema è che l'intero sito sta perdendo la sua "forma". I seguenti elementi non rimarranno al loro posto e distruggeranno il layout. C'è un modo per evitarlo? Grazie –

Forse posso dargli un alto e un pensionante o qualcosa del genere. –

Rondell può essere un plugin jQuery per visualizzare gallerie e contenuti diversi l'approccio che desideri.

View Demo ho usare questo plugin è abbastanza facile da usare, scaricare Source Code

fonte

2013-11-05 18:15:56 user2957535

Sembra che tu erano di fretta, ha dimenticato di pubblicare il collegamento completo! – Mutant

(collegamento mancante fisso) – rtpHarry

La classe carousel-caption è male per te. Non usarlo se non vuoi mostrare le immagini e stai bene. È persino semanticamente sbagliato definire il contenuto html come una didascalia . Basta lasciare la classe di distanza e usare una pianura div

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

anche queste ombre morbide spariranno poi. E questo è positivo, dal momento che non li vogliamo sul puro testo (anche se possono sembrare belli con le immagini).

fonte

2014-08-27 19:58:58 schmijos

@GLES esiste un metodo molto semplice per utilizzare la giostra senza alcuna immagine. In realtà la proprietà posizione di .carousel-caption stava causando il problema. È sufficiente impostare per statica