Bootstrapでスライダー(カルーセル)の作成方法

Bootstrapを使えば、スライダーを簡単に実装することができます。

ちょっとしたカスタマイズ方法を共有します。

(注)Bootstrapではスライダーのことをカルーセル（Carousel）と呼びますが、この記事では「スライダー」に統一して説明します。

Bootstrapのスライダーのカスタマイズ

インディケーターの色を変更する（基本色）

.carousel-indicators li {
    background: #D5D5D5（通常時）;
}

インディケーターの色を変更する（表示されている時）

表示されているときは、自動的に.activeが付与されています。

.carousel-indicators .active {
    background: red(表示されているときの色);
}

インディケーターを丸くする

インディケーターの形はデフォルトでは平べったい四角形です。

.carousel-indicators li {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0;
    border :10px;
}

公式ドキュメント：https://getbootstrap.com/docs/4.1/components/carousel/(英語)
自分のブログ：https://akihiko-s.com/