アプリ屋かりん

Bootstrap

【Bootstrap】カルーセルを使用する

Bootstrapを使用して「カルーセルを使用する」方法を解説します。

表示

次のように表示されます。

実装方法

次のようにコードを記載します。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1 class="d-block w-100 bg-primary p-5 text-white text-center">スライド1</h1>
</div>
<div class="carousel-item">
<h1 class="d-block w-100 bg-success p-5 text-white text-center">スライド2</h1>
</div>
<div class="carousel-item">
<h1 class="d-block w-100 bg-info p-5 text-white text-center">スライド3</h1>
</div>
</div>
</div>
ADVERTISEMENTS
ADVERTISEMENTS
Copyright © アプリ屋かりん All rights reserved.