の冒頭のサンプル
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
を使ってみます。
で、実際に使ってみたんですがこんなカンジになりました。
右上の○をクリックすると各ページに移動して、左右の△をクリックすると次/前ページ移動になります。 これとさっきのソースを照らし合わせてみてみると以下のカンジです。 ＃ソースに解説をつけただけです。
<!-- carousel全体のdiv --!>
<!-- class属性にcarouselとslideを指定する必要がある --!>
<div id="myCarousel" class="carousel slide">
<!-- 右上のページ指定移動リンク -->
<!-- carousel-indicators のclass指定で ○が横に並ぶのを実現（実際にはcssがやってくれる） -->
<ol class="carousel-indicators">
<!-- 右上の○の１つ１つ data-slide-to で移動先スライドを指定 -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<!-- 表示する写真たち carousel-innerをclassに指定するとスライドセットとして認識される -->
<div class="carousel-inner">
<!-- … という部分にはimgタグ等で写真を表示する -->
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<!-- ページめくりボタン -->
<!-- classにcarousel-control left（right）と指定してdata-slide にprev(next)を指定すると機能する --!>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
うむ、簡単だ。carouselは使ったカンジのメモとしては以下のようなものがあります。
スライドショーの全体幅を調整するには？
大外のdiv（#myCarousel）にwidthを設定すればいい
自動スライドショーを止めるには？
大外のdiv（#myCarousel）に data attribute形式で指定
以下の感じ
data-interval="false"
ちなみに指定されない場合のデフォルトは多分5000ミリ秒になってるんだと思う（感覚）
サイズの違う画像をめくろうとするとどうなる？
大外のdiv（#）で指定したwidthに収まるようにリサイズされた
恐らくwidth,heightのうちオーバーする方に勝手にリサイズされるのだろう（多分divのフツーの挙動）
ページめくり画像ってどうしてるんだ？
『>』っていう文字を装飾しているようだ
なーる
右上の○○○は画像に引きずられて移動するの？
しない
CSSで
position: absolute;
top: 15px;
right: 15px;
と指定されてる
ちなみにposition: absolute;は
親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
らしいので、この場合は親divがposition:relative; なので親要素の左上が基準位置になっている
これモーダルダイアログ化できる？
（かなり簡単に）できた
ダマされたと思ってモーダルのデモコードのbodyの部分にcarouselのコードを挿入してみなさい
と言ったところでcarouselはこんなもんで（簡単なので）
それではまた次回までごきげんよう。
