bootstrap怎么用轮播图-Bootstrap教程-PHP中文网

在 bootstrap 中使用轮播组件，需要以下步骤：包含 bootstrap 文件；创建轮播容器；添加幻灯片；设置活动幻灯片；添加导航控件。

如何在 Bootstrap 中使用轮播

Bootstrap 的轮播组件允许你在网页上创建自动滑动的图像或视频序列。以下是如何在 Bootstrap 中使用轮播：

步骤 1：包含 Bootstrap

在你的 HTML 页面中包含 Bootstrap 的 CSS 和 JavaScript 文件：

<code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script></code>

步骤 2：创建轮播容器

创建一个 div 元素作为轮播容器：

<code class="html"><div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ul>
<li>
<code>id</code> 属性可以是唯一的，用于引用轮播。</li>
<li>
<code>carousel slide</code> 类表示这是一个轮播。</li>
<li>
<code>data-bs-ride="carousel"</code> 属性启用轮播的自动播放。</li>
</ul>
<p><strong>步骤 3：添加幻灯片</strong></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<p>在容器内，使用 <code>div</code> 元素创建幻灯片：</p>
<pre class="brush:php;toolbar:false;"><code class="html"><div class="carousel-inner">
  <!-- 添加幻灯片 -->
</div></code>

每张幻灯片应包含一个图像或视频以及标题和描述（可选）。

步骤 4：设置活动幻灯片

使用 active 类设置第一张幻灯片为活动幻灯片：

<code class="html"><div class="carousel-item active">
  <!-- 幻灯片内容 -->
</div></code>

步骤 5：添加导航控件

使用箭头按钮和分页器为轮播添加导航控件：

<code class="html"><button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

<ol class="carousel-indicators"><!-- 添加分页器 --></ol></code>