6

ブートストラップカルーセルの実装に問題があります。誰かが次のhtmlとjsを見て、スライドの実装方法を教えてもらえますか？.jsは編集されておらず、カルーセルはボディヒーローユニットにインストールされています。カルーセルAPIを実装しますか？使用しているカルーセルを.jsファイル内で定義するにはどうすればよいですか？ありがとう。

<div class="carousel">

  <!-- Carousel items -->
  <div class="carousel-inner">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></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>
4

5 に答える 5

8

注：この回答は元々Bootstrap 2.3.2用でした（バージョン3では機能しない可能性があります）

すべてのスライドに「アイテム」クラスを配置し、最初のスライドに「アクティブ」クラスを配置する必要があります。これは私のために働いた。

<div class="carousel">
  <div class="carousel-inner">


<!-- your slide -->

     <div class="hero-unit item active">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
     </div> 

  </div>
</div>

そして、クリストファーが言ったように、それを開始するにはこの関数を使用する必要があります。

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>
于 2012-02-24T17:35:38.290 に答える
6

私の理解はそれです

<div class="carousel">

する必要があります

<div id="myCarousel" class="carousel">

ここで、idは「矢印」のhrefです。

于 2012-02-14T07:46:13.630 に答える
3

Bootstrap Carousel のドキュメントは、http ://twitter.github.com/bootstrap/javascript.html#carousel から入手できます。

実行するには、次のようなものを追加する必要があると思います。

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>
于 2012-02-08T22:33:34.967 に答える
1

サンプルコードには項目がありません。それを機能させるには、carousel-inner div に少なくとも 2 つのアイテムが必要です。

  1. 2 番目のアイテムを作成する
  2. 最初のアイテムにアクティブなクラスがあることを確認してください。これにより、ボールが転がり始めます
  3. ベアコードは次のようになります

.

<div class="carousel-inner">
   <div class="active item">…&lt;/div>
   <div class="item">…&lt;/div>
   <div class="item">…&lt;/div>
</div>
于 2012-06-19T20:40:42.407 に答える