カルーセルにコントロールを加える - Bootstrapのチュートリアル

このレッスンでは carousel に 画像切り替えのコントロールを加えます。 今開いてるこの写真のドキュメント なんですけれども まずは自動的に写真が切り替わる carousel の設定ができています。 div 要素を三重にして一番外が class carousel で slide、それから data-ride に carousel という値を設定し その内側に div 要素 今度は class は carousel-inner さらにその中の 画像を包んでいる div 要素は carousel-item と。 後最初に表示する写真は active の class を加えておきます。 これで自動的に写真が切り替わる ということになるわけですが 今の動きを確認しときましょう。 画像がウィンドウいっぱいに広がりますので もう少し狭くしましょうか。 これぐらいでいいでしょうか。そうすると 自動的に画像が切り替わります。 ポインターを重ねると このアニメーションが止まって そのままその写真を 見続けることができます。 ここに次の写真を早く見たい、とか 前の写真に戻りたい、といった コントロールを加えたいと思います。 コントロールを加えるために まず最初に行うのは 一番外側の div 要素、この carousel のクラスが設定された div 要素に対し id を加えます。 id で、もちろん名前は規則に 則っていればなんでもいいんですが ここでは carousel-controls というふうにしましょう。 好きな名前にして結構ですよ。 さてその上で carousel-inner の外に control を加えます。 control は a 要素で前へと 次へと２つ加えるんですけれども class は carousel- control-、まずは前へということで prev ですね。 そして href です。 ここで # をつけて 先ほど設定した id ですね これを コピーしといた方が安全ですね。 コピーします。 そしてこの中にペースト、と。 これが control の対象を 定めてることになります。 そして次にこれは前に 写真を戻すんだよ、ということで data 特性です。data- の slide という属性に prev というふうに設定します。…