Bootstrap実践編 - スライダーの追加②

お疲れ様です。
ライフマップ開発チームの大城です。

本日は、前回追加した画像スライダーをカスタマイズしていこうと思います。 
前回の記事はこちらです！
https://tech-lifemap.blogspot.com/2022/12/bootstrap-3.html

# Webサイト改修

## 前回の振り返り

前回は画像スライダーの追加を行いました。 
サンプルを作りましたので、比較用にお使いください。 
https://life-campaign.com/tech/bootstrap/03

## 画像スライダーのカスタマイズ

### 事前準備

前回追加した画像スライダーには ID を設定していませんでした。 
次に紹介する前後ボタン等は、どのスライダーを操作するのか指定しなければ動作しない為、事前に ID を設定しましょう。 
スライダーのDIV要素のID属性に carousel-top と入力してください。

<div id="carousel-top" class="carousel slide" data-bs-ride="carousel">

### 前後(Prev/Next)ボタンの追加

以下のコードを .carousel-inner の次に加えると、前後の画像に切り替えるボタンが追加されます。

    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-top" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel-top" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

[クラス名の説明]  

• carousel-control-prev: 前に戻るボタンに付与するクラス名です  
• carousel-control-next: 次に進むボタンに付与するクラス名です  
• carousel-control-prev-icon: 前に戻るボタンのアイコン表示用のクラスです  
• carousel-control-next-icon: 次に進むボタンのアイコン表示用のクラスです  
• visually-hidden: 補助技術（スクリーンリーダー等）から隠すクラス名です  

[属性の説明]  

• data-bs-target: 対象のスライダーを指定します  
• data-bs-slide: 対象のスライダーの方向を指定します  
• aria-hidden: 補助技術（スクリーンリーダー等）から隠すオプションです  

リンク先のように動作すれば完了です。 
手動でスライダーを操作できるので、より便利になりますね。
https://life-campaign.com/tech/bootstrap/04/1.html

### インジケーターの追加

以下のコードをスライダーの子要素の頭に配置すると、インジケーターが追加されます。

  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

[クラス名の説明]  

• carousel-indicators: インジケーターに付与するクラスです  
• active: 最初に表示する画像に付与するクラスです

[属性の説明]  

• data-bs-target: 対象のスライダーを指定します  
• data-bs-slide-to: 対象のスライダーの何枚目に移動するか指定します
• aria-current: 現在の位置を示します
• aria-label: 現在の位置に名前を付けます

リンク先のように動作すれば完了です。 
一気に指定のページまで移動できるのは便利ですよね。 
https://life-campaign.com/tech/bootstrap/04/2.html

# 最後に

カルーセルにはまだまだオプションがたくさんあります。 
次回も引き続き紹介していくので、気が向けばまた見に来て下さい〜  

大城でした！

Bootstrap実践編 - スライダーの追加①

お疲れ様です。  
ライフマップ開発チームの大城です。

本日は、Bootstrapを使ってサイトのトップに画像スライダーを追加したいと思います。  
前回の記事はこちら！  
https://tech-lifemap.blogspot.com/2022/04/bootstrap-2.html

# Webサイト改修

## 画像スライダー

早速サイトのトップに画像スライダーを追加していきましょう。  
マニュアルだとこちらになります。  
https://getbootstrap.jp/docs/5.0/components/carousel/

まずは36行目のHello World!!を消しましょう。

<h1>Hello, world!</h1>


削除した行に画像スライドを入れます。  
マニュアルにあるSlide onlyのサンプルコードをそのまま貼り付けてください。  
https://getbootstrap.jp/docs/5.0/components/carousel/#slides-only
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
[クラス名の説明]
carousel slide: Bootstrapのカルーセル機能を使用するには必須のクラス名です。
carousel-inner: カルーセルの中身をこのクラス名で囲みます。
carousel-item: スライドさせる要素１つ１つに付けるクラス名です。
active: １番初めに表示させる要素に付けるクラス名です。
[属性の説明]
data-bs-ride="carousel": ページ読み込み時にカルーセルをスライドさせる為に必要な設定です。
サンプルコードのままだと画像が表示されないです。  
なぜかというと、imgタグのsrc属性の値が「...」だからです。  
画像ファイルを用意するのは手間なので、簡単に作成できるSVGを使ってみましょう！

svgタグは次のように作成します。
<svg class="d-block w-100" width="800" height="400">
    <rect width="100%" height="100%" fill="#777"/>
    <text x="50%" y="50%" fill="#555">First slide</text>
</svg>
[クラスの説明]
d-block: display: block;
w-100:   width: 100%;

[SVGの属性と子要素の説明]
width: 幅の指定
height: 高さの指定
<rect ... />: SVGの画像パーツ
width: 幅の指定
height: 高さの指定
fill: 背景色の指定
<text>...</text>: SVGのテキストパーツ
width: 幅の指定
height: 高さの指定
fill: 背景色の指定
...: テキスト内容

作成したsvgタグをimgタグに上書きしましょう。
2個目、3個目のテキストはSecond、Thirdに書き換えてくださいね。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">First slide</text>
        </svg>
    </div>
    <div class="carousel-item">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">Second slide</text>
        </svg>
    </div>
    <div class="carousel-item">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">Third slide</text>
        </svg>
    </div>
  </div>
</div>


## 確認

ここまで改修したら、一旦表示内容を確認してみましょう。
いい感じに画像スライダーが表示されていると思います！

簡単に色々な機能を追加できるのが、Bootstrapのいいところですよね。

今回はここまでとします。
次回もどうぞよろしくお願いいたします。
大城でした！