Bootstrapのcarouselをつかってみる その２ 使ってみる

というわけでBootstrapのcarouselを実際に使ってみましょうというやつです。

の冒頭のサンプル

<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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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はこんなもんで（簡単なので）
それではまた次回までごきげんよう。

Bootstrapのcarouselをつかってみる その１ マニュアル確認

だいぶ間が空いてました
すいません

で、今回から２回ぐらいでBootstrapのcarouselの使い方を見ていきます。
carouselというのはあれです。
写真とかをプレビューしてページ送りするようなやつです。

まずものは

http://twitter.github.io/bootstrap/javascript.html#carousel

にあります。
ちなみになんでコレがcarouselなんだ？ と思った人は英語の辞書でcarouselを引いてみましょう。
carousel というのはおなじみスペースアルクで引いてくると

1. 〔遊園地の〕回転木馬◆【同】merry-go-round
2. 〔空港などの〕回転式コンベヤー
3. 〔書店などの〕回転式棚
4. 〔中世の騎士の〕馬上試合

というカンジなので、くるくる回って見えるものが変わるというのを表現しているのでしょう。

＃まあ、ものを見れば一発でわかります。

で、チョット翻訳してみます。

＃わかりにくいんで翻訳は青文字にしておきます。

＃あと、（）で囲まれているのは本文には無いけど、意味が通りやすいようにワタクシが補足した部分です。

Carousel bootstrap-carousel.js

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

は（ほぼ訳すまでもないですが）

（Bootstrap carouselは）カルーセルみたいに回転するスライドショーのプラグインとコンポーネントです

というかんじですね。

＃全然関係ないですがカルーセルとセガールってちょっとにてますね。

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

データ属性でカルーセルを使う場合。

データ属性でカルーセルを使えば位置を簡単にコントロールできます。

data-slide属性にはpref/nextを設定でき、スライドめくり（次のスライド/前のスライド）という操作を実現できます。

（exampleにあるようにリンクなどに追加すると、そのリンククリックでスライドめくりができるようになるということです。）

スライドめくりのもう一つの方法としてdata-slide-to属性でスライドのページ数を指定する方法があります。スライドのインデックスは0から始まります。

次、JavaScriptの方

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as indata-interval="".

Name	type	default	description
interval	number	5000	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string	"hover"	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

JavaScriptで実現する場合は

$('.carousel').carousel();

で初期化します。

（おなじみですが $('.carousel')の部分は要素抽出セレクタなので対象が指定できるならidでもいいんでしょう）

初期化の際のオプションとしては以下があります。

データ属性で実現する場合はprefixとして data- をつけたデータ属性をcarouselのコンポーネントに記述します。

（ようはcarouselの大元のdivにdata-pause="hover" とか書くということです）

オプション

interval 自動でページめくりされる時の間隔（おそらく単位はミリ秒）

pause マウスオーバーで自動めくりを停止しマウスリリースで自動めくりを再開する（と書いてあるのだが、hover→unhoverはいがいの切替セットはどうするのだろうか…）

といったあたりで大体翻訳を終わりにします。

後書いてあるのは各メソッドについて（初期化/ページめくり/停止）なのでサンプルを見ていけばわかるでしょう、ということです。

というわけで今回はここまで。