[Bootstrap]Carouselのカスタマイズ

rousel

Bootstrap のスライドショー Carousel(カルーセル) を設置する機会があると思います。画像の上に文字入れ(キャプション)をする事もあるでしょう。レスポンシブでも伝わるキャプションのカスタマイズをご紹介します。

デフォルトのCarousel

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="画像.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left d-none d-md-block">
<h2>Example headline.</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="画像.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h2>Another example headline.</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="画像.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right d-none d-md-block">
<h2>One more for good measure.</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

大きなデバイスではこんな感じ。

カルーセル

中サイズ以下のデバイスでは、画像は比率に合わせて縮小され、class としてd-none d-md-block が付いているのでキャプションが非表示になります。画像だけになってしまいます。

Carousel

キャプションのカスタマイズ

小さなデバイスでは画像だけになってしまう事から、アピール出来る場が減ってしまいます。画像の下に見やすくキャプションが表示される様にしようと思います。

Carousel

先ほどのコードのd-none d-md-blockを取り除き、常に表示される様にします。そして、 CSSで.carousel-caption に振られていたposition: relative;を小さなデバイス (スマホ, 768pxとそれ以下)の時だけposition: static;で解除し、画像の下に来るようにします。

@media (max-width: 767.98px) { 
.carousel-caption {position: static;}
.carousel-caption p{color: #999;} 
}

pのcolorはデフォルトで白になっていたので、背景が白の場合は必要になると思います。

画面サイズの設定については、[Bootstrap] ブレークポイント @media をご参照下さい。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください