web-dev-qa-db-fra.com

Bootstrap.js Carousel avec uniquement du texte

Je suis this tutoriel pour faire glisser le carrousel. 

Quand je définis chaque élément contient image et paragraphe comme - 

<div class="item">
    <img src="http://placehold.it/1200x480" alt="" />
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

ça marche bien ( ici son jsFiddle ).

Mais quand je le réduis au paragraphe seulement comme - 

<div class="item">
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

ça arrête de fonctionner ( ici son jsFiddle ). 

Comment est-ce que je pourrais le faire fonctionner avec seulement le paragraphe tel que glissent le texte chaque commutateur? 

javascriptjqueryhtmlcsstwitter-bootstrap
10
URL87

La propriété position de la .carousel-caption était la cause du problème. Sans l'image, elle est tronquée. Définissez-la sur static:

.carousel-caption{
    position:static;
}

Voici la démo de ce travail avec et sans image:

D&EACUTE;MO

15
I Can Has Kittenz

Le moyen le plus simple consiste simplement à créer des images de couleur d'arrière-plan. Si vous voulez une manière plus propre de le faire, vous pouvez probablement obtenir le même effet en utilisant CSS.

1
Rahul Dass

Voir après suppression de l'image et ne laissant que des paragraphes

j'ai donné à la classe de conteneur d'élément la largeur et la hauteur de l'image avec une couleur d'arrière-plan à diviser pour indiquer la présence, il suffit de copier/coller ce code dans la section fiddle css et de lancer le changement

.item{
    height:480px;
    width:1200px;
    background-color:orange;
}
1
codefreaK

J'ai eu le même problème. Cette réponse est la plus simple et solution optimale pour ce problème: https://stackoverflow.com/a/25535930/4792775

0
ivahidmontazer