環境
- Angular6.1.2
- Bootstrap4.1.3
やりたいこと
Bootstrapのインジゲーター付きカルーセルを使ってAngular上で画像を表示させる。
ついでにインジゲーターやコントローラーをカスタマイズする
環境構築
※カルーセルに表示させたい画像/写真はあらかじめ用意しておいてください
※あらかじめ下記のパッケージ(jquery、popperはbootstrapの動作に必要)を追加
npm install --save jquery@1.9.1
npm install --save popper.js@^1.14.3
npm install --save bootstrap
そのほかの設定等はこちらを参照
jqueryのパスのみ修正
"node_modules/bootstrap/dist/js/bootstrap.slim.min.js"
↓
"node_modules/bootstrap/dist/js/bootstrap.min.js"
基本コード
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../../assets/images/forCarousels/carousel1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/images/forCarousels/carousel2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../assets/images/forCarousels/carousel3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
ここからカスタマイズしていきます
1行目のclass="carousel slide"
があるdivタグ内で全体の設定ができる
よく使うオプション
プロパティ名 | 詳細 |
---|---|
data-interval | 自動的に次の画像に切り替わる。falseで無効 |
data-wrap | falseにするとループしない |
CSSでカスタマイズ
各classにcssでスタイルを当てることである程度のカスタマイズができる
高さを変える
幅も変えられますが、コントローラーやインジケーターの位置は変わりません
.carousel-inner{
height: 300px
}
コントローラーの位置を変える
コントローラーのクリック範囲や位置を変更できます。
/* 左コントローラー */
.carousel-control-prev{
width: 100px;
top: 200px;
margin-left: 100px;
}
/* 右コントローラー */
.carousel-control-next{
width: 100px;
top: 200px;
margin-right: 100px;
}
コントローラーのデザインを変える
以下のコードでは試しにFontAwesomeのfa fa-arrow-circle-o-right
をクラスにあててます。
デフォは'carousel-control-prev-icon'
<!-- 左右にあるコントローラーを表示 -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="fa fa-arrow-circle-o-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
インジゲーターの形や色、位置をカスタマイズ
CSSでカスタマイズできます。
/* heightとwidthを同じ値にしてborder-radiusを50%にすると円になる。
bottomを指定すれば位置も調整可
*/
.carousel-indicators li{
border-radius: 50%;
height: 15px;
width: 15px;
background-color: #a7a7a7;
}
アクティブなページは目立たせることもできる
.carousel-indicators .active {
bottom: 3px;
height: 20px;
width: 15px;
background-color: #3897f0;
}