Bootstrap4 轮播

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

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

如何创建轮播

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

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-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://ko.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ko.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ko.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">
　　<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://ko.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>제1장 이미지 설명 제목</h2>
　　　　　　　　<p>설명 텍스트<!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ko.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>제2장 이미지 설명 제목</h2>
　　　　　　　　<p>설명 텍스트<!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://ko.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 轮播

如何创建轮播

轮播图片上添加描述

위 예제에서 사용된 클래스 설명