html - Twitterブートストラップカルーセルは、矢印の代わりに数字でカスタマイズします

Question

これは私の最初の投稿で、twitter ブートストラップでレールを学ぼうとしています。カルーセルを使用していますが、画像の左端と右端に矢印を表示するのではなく、右下にクリックして画像を変更できる数字を含めたいと考えています。たとえば、数字 1、2、および 3 が右下の四角形に表示され、それぞれが表示される画像を変更します。それ、どうやったら出来るの？

Answer 1

マイルストーン 2.3 でカルーセル プラグインにピル ナビゲーションを追加する計画があります。その機能を追加するプル リクエストが既に存在するため、そのバージョンのbootstrap-carousel.jsを使用することをお勧めします。ただし、これは新しいコードであり、変更される可能性があることに注意してください。そのため、使用する場合は、ライフサイクルを通じてそれに従う準備をしてください。

更新されたプラグインのデモは次のとおりです。

JSFiddle

現在は丸薬を使用していますが、数字に変更することはそれほど難しくありません。おそらく、次のようなコードを追加するだけです。

$('.carousel-pills > span').each(function (i) {
  $(this).text(i+1);
});

カルーセルの初期化後にこれを実行します。丸薬をドットからボックスに変更するには、LESS/CSS を微調整する必要があります。