41

個人的なプロジェクトでtwitterブートストラップカルーセルを使用したいと思います。これまでのところ、ブートストラップホームページの例を使用しているため、非常にうまく機能します。

ここで、画像の代わりに単純なhtmlコンテンツを配置したいと思います。このコンテンツは、写真と同じように回転する必要があります。私が入力したテキストはカルーセルキャプションに表示され、カルーセルキャプションに入力したテキストは表示されません。

例：

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

この作品を手に入れる方法はありますか？おそらく、コンテンツを配置できる300 x300pxの白いスパンを宣言する方法があります。

私は初心者レベルであることを知っておく必要があります。私は今、html、css、js、mongodb、bootstrap、node.jsを学んでいます。しかし、これは私にとって今は少しだけです。

ダニエルに感謝します

4

6 に答える 6

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

カルーセルからhtml/cssを置き換えて修正できない場合は、元の内容に戻してください。次に、ゆっくりとコードの置き換えを開始し、次のcss属性に十分注意してください。これらは、エラー（最も有用なcss境界など）を見つけるのに役立つだけでなく、追加された新しいコンテンツが以前に肥大化するのを防ぐのにも役立ちます。 1つ（最大幅/高さcss属性）。

次のcss属性に細心の注意を払ってください。

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

z-indexを変更しないでください。最初に上記で指定したものを使用して不透明度を調整してから、複雑な作業を開始します。疑問がある場合はもう一度質問し、タイプミスをお詫びします。

于 2012-08-11T14:09:54.847 に答える
14

クラスはあなたcarousel-captionにとって悪いです。写真を見せたくなくて元気な場合は使用しないでください。HTMLコンテンツをキャプションとして定義することは意味的に間違っています。クラスを離れて、プレーンを使用するだけですdiv

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

また、これらの滑らかな影は消えます。そして、それは良いことです。なぜなら、純粋なテキストではそれらを望まないからです（ただし、写真では見栄えがするかもしれません）。

于 2014-08-27T19:58:58.733 に答える
10

carousel-captionあなたはdivを閉じませんでした。おそらくあなたの問題です。ブートストラップカルーセルのドキュメントを見ると、各アイテム内で画像またはテキストを使用することに違いはありません。

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

jsfiddleでこのコードの動作を見てください：http：//jsfiddle.net/QYFa2/

于 2012-08-11T13:15:34.850 に答える
10

@GLES画像なしでカルーセルを使用する非常に簡単な方法があります。実際には、.carousel-captionのpositionプロパティが問題を引き起こしていました。静的に設定するだけです 

.carousel-caption { position:static; }

これがそのデモです

デモ

于 2014-10-07T15:18:06.887 に答える
2

Rondellは、ギャラリーやさまざまなコンテンツを希望するアプローチで表示するためのjQueryプラグインである可能性があります。

デモを見る私はこのプラグインを非常に使いやすく使用しています。ソースコードをダウンロードしてください

于 2013-11-05T18:15:56.053 に答える
2

カルーセルキャプションクラスを削除するだけで、すべてが素晴らしいものになります

于 2017-11-24T01:16:38.923 に答える