web-dev-qa-db-fra.com

Bootstrap Carousel autre contenu que image

Je veux utiliser le carrousel de bootstrap de Twitter dans un projet personnel . Jusqu’à présent, cela fonctionne vraiment bien car j’utilise l’exemple de la page d’accueil de bootstrap.

Maintenant, je veux placer du contenu HTML simple à la place des images… .. Ce contenu doit ensuite pivoter de la même manière que les images… .. Le texte que je mets est affiché dans la légende du carrousel et le texte que je mets dans la légende n'est pas affiché. 

Exemple:

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

Y at-il un moyen d’obtenir ce travail? Peut-être y at-il un moyen de déclarer une plage blanche avec par exemple 300 x 300 px où je peux placer du contenu.

Vous devriez savoir que je suis débutant. Je suis en train d'apprendre html, css, js, mongodb, bootstrap, node.js. Mais c'est un peu trop pour moi maintenant.

merci beaucoup Daniel

htmlcsstwitter-bootstrap
37
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 vous avez remplacé html/css à partir du carrousel et que vous ne parvenez pas à le corriger, récupérez le fichier d'origine . Puis commencez lentement à le remplacer par votre code, et soyez très prudent avec les attributs css suivants: trouver des erreurs (comme les bordures css les plus utiles), mais elles aident également à empêcher le nouveau contenu ajouté d’augmenter le précédent (attributs css max width/height).

Portez une attention particulière aux attributs css suivants:

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

Ne modifiez pas les z-index et l'opacité. Commencez par travailler avec ceux que j'ai indiqués ci-dessus, puis recommencez à faire des choses complexes. Demandez à nouveau si vous avez des doutes et des excuses pour les fautes de frappe, j'ai moins de temps.

40
GLES

La classe carousel-caption est mauvaise pour vous. Ne l'utilisez pas si vous ne voulez pas montrer d'images et que tout va bien. Il est même sémantiquement faux de définir votre contenu HTML en tant que caption . Laissez simplement la classe à l’écart et utilisez une simple variable div

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

De plus, ces ombres lisses disparaîtront ensuite. Et c’est bien, car nous ne les voulons pas en texte pur (même s’ils ont l’air sympa sur les photos).

10
schmijos

Vous n'avez pas fermé le carousel-caption div. C'est probablement ton problème. Si vous consultez la documentation de bootstrap carrousel, il n’ya pas de différence entre l’utilisation d’images ou de texte dans chaque élément. 

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

Regardez le comportement de ce code dans jsfiddle: http://jsfiddle.net/QYFa2/

9
Pigueiras

@ GLES il existe une méthode très simple pour utiliser le carrousel sans aucune image. En fait, la propriété position de .carousel-caption était à l'origine du problème. Il suffit de le définir sur static 

.carousel-caption { position:static; }

Voici la démo pour ça 

Démo

7
Gaurav Deshpande

Rondell peut être un plugin jQuery pour afficher des galeries et du contenu différent de l'approche souhaitée.

Voir la démo j’utilise ce plugin, il est assez facile à utiliser, téléchargez Code source

2
user2957535

Il suffit de supprimer la classe carrousel-légende et tout ira bien

0
Elik Jafaroff