Bootstrap4 轮播

轮播（也称为幻灯片或图像滑块）是在网页上很小的空间内展示大量内容的最佳方法之一。它是内容的动态表示，其中，通过循环浏览多个项目，可以使用户看到或访问文本和图像。

轮播是一个循环的幻灯片(地址:https://ja.oldtoolbag.com/run/html/bootstrap-carousel-example.html)：

如何创建轮播

以下示例创建了一个简单的图片轮播效果：

サンプル

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/*　画像を完全にレスポンシブにする　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　インジケータ　-->
　　<ul　class="carousel-indicators">
　　　　<li　data-target="#demo"　data-slide-to="0"　class="active"></li>
　　　　<li　data-target="#demo"　data-slide-to="1></li>
　　　　<li　data-target="#demo"　data-slide-to="2></li>
　　</ul>
　
　　<!--　スライドショー画像　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　左右切り替えボタン　-->
　　<a　class="carousel-control-prev"　href="#demo"　data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a　class="carousel-control-next"　href="#demo"　data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

テストして見てください ‹/›

轮播图片上添加描述

在每个 <div class="carousel-item"> 内に <div> を追加して、スライドショー画像の説明テキストを設定します：:

サンプル

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　サンプル</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/*　画像を完全にレスポンシブにする　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　インジケータ　-->
　　<ul　class="carousel-indicators">
　　　　<li　data-target="#demo"　data-slide-to="0"　class="active"></li>
　　　　<li　data-target="#demo"　data-slide-to="1></li>
　　　　<li　data-target="#demo"　data-slide-to="2></li>
　　</ul>
　
　　<!--　スライドショー画像　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>第1枚の画像の説明タイトル</h2>
　　　　　　　　<p>説明テキスト!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>第2枚の画像の説明タイトル</h2>
　　　　　　　　<p>説明テキスト!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ja.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>第3枚の画像の説明タイトル</h2>
　　　　　　　　<p>説明テキスト!/p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　左右切り替えボタン　-->
　　<a　class="carousel-control-prev"　href="#demo"　data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a　class="carousel-control-next"　href="#demo"　data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

テストして見てください ‹/›

上記の例で使用されているクラスの説明

クラス	説明
.carousel	カルーセルを作成します
.carousel-indicators	カルーセルにインジケーターを追加します。それはカルーセルの下にある小さな点で、カルーセルの進行中に現在の画像が何枚目かを表示します。
.carousel-inner	切り替えたい画像を追加します
.carousel-item	各画像の内容を指定します
.carousel-control-prev	左側のボタンを追加し、クリックすると前の画像に戻ります。
.carousel-control-next	右側のボタンを追加し、クリックすると次の画像に切り替わります。
.carousel-control-prev-icon	と .carousel-control-prev と一緒に使用して、左側のボタンを設定します
.carousel-control-next-icon	と .carousel-control-next と一緒に使用して、右側のボタンを設定します
.slide	画像のトランジションとアニメーション効果を切り替えます。必要でない場合は、このクラスを削除してください。

Bootstrap4 モーダル Bootstrap4 カスタムフォーム

Bootstrap4 基本チュートリアル

Bootstrap4 轮播

如何创建轮播

轮播图片上添加描述

上記の例で使用されているクラスの説明