すいません
で、今回から２回ぐらいでBootstrapのcarouselの使い方を見ていきます。
carouselというのはあれです。
写真とかをプレビューしてページ送りするようなやつです。
まずものは
にあります。
ちなみになんでコレがcarouselなんだ？ と思った人は英語の辞書でcarouselを引いてみましょう。
carousel というのはおなじみスペースアルクで引いてくると
- 〔遊園地の〕回転木馬◆【同】merry-go-round
- 〔空港などの〕回転式コンベヤー
- 〔書店などの〕回転式棚
- 〔中世の騎士の〕馬上試合
というカンジなので、くるくる回って見えるものが変わるというのを表現しているのでしょう。
＃まあ、ものを見れば一発でわかります。
で、チョット翻訳してみます。
＃わかりにくいんで翻訳は青文字にしておきます。
＃あと、（）で囲まれているのは本文には無いけど、意味が通りやすいようにワタクシが補足した部分です。
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はいがいの切替セットはどうするのだろうか…）
といったあたりで大体翻訳を終わりにします。
後書いてあるのは各メソッドについて（初期化/ページめくり/停止）なのでサンプルを見ていけばわかるでしょう、ということです。
というわけで今回はここまで。
