Bootstrap 简明教程

Bootstrap - Carousel

本章讨论了有关 Bootstrap 组件轮播的内容。Bootstrap 中的轮播组件用于以幻灯片的形式显示一组轮播图像或内容。

This chapter discusses about the Bootstrap component carousel. The Carousel component in Bootstrap is used to display a rotating set of images or content in a slideshow format.

Overview

  1. The component provides multiple options for customization, including slide transitions, interval timing, and navigation controls.

  2. It allows users to easily navigate through the content and is commonly used for showcasing products or featured content on a website.

  3. To ensure optimal performance, carousels require manual initialization through the carousel constructor method. If not initialized, certain event listeners (specifically those necessary for touch/swipe support) will remain unregistered until a control or indicator is activated by the user.

  4. The carousel with the data-bs-ride="carousel" attribute is initialized automatically on page load. No need to explicitly initialize such carousels.

  5. Bootstrap does not support nested carousels. They can also often cause usability and accessibility challenges.

  6. The animation effect of the carousel component depends on the prefers-reduced-motion media query.

让我们看看一个基本轮播的示例：

Let us see an example of a basic carousel:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel example</h1>
	<div id="carouselExample" class="carousel slide">
		<center>
		<div class="carousel-inner bg-secondary">
		  <div class="carousel-item active">
			<p class="text-bg-danger display-6">Slide 1</p>
			<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="300" class="d-block w-50" alt="...">
		  </div>
		  <div class="carousel-item">
			<p class="text-bg-danger display-6">Slide 2</p>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="300" height="400" class="d-block w-50" alt="...">
		  </div>
		  <div class="carousel-item">
			<p class="text-bg-danger display-6">Slide 3</p>
			<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="300" height="500" class="d-block w-50" alt="...">
		  </div>
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="visually-hidden">Next</span>
		</button>
		</center>
	  </div>
  </body>
</html>

需记住的要点：

Points to remember:

  1. The slide dimensions are not automatically normalized in carousels.

  2. You need to use additional utilities or custom styles to size the content in carousels.

  3. The previous/next controls and indicators are not explicitly required, as carousels support them. Add and customize the controls as per your requirement.

  4. Do not forget to add the .active class to one of the slides, else the carousel will not be visible.

  5. Ensure to set a unique id on the .carousel for optional controls, in case you are using multiple carousels on a single page.

  6. You must add the data-bs-target attribute to the control and indicator elements or href for links, that matches the id of the .carousel element.

Indicators

指示器可以在上一个/下一个控件旁边添加，以便用户可以直接跳转到特定幻灯片。

Indicators can be added along with the previous/next controls, such that the user has the access to jump directly to a specific slide.

让我们看看添加指示器的示例：

Let us see an example for adding indicators:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Indicators</h1>
		<div id="carouselExample" class="carousel slide">
		<center>
			<div id="carouselExampleIndicators" class="carousel slide bg-secondary">
				<div class="carousel-indicators text-dark">
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button>
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button>
				  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button>
				</div>
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="400" height="300" alt="...">
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </div>
  </body>
</html>

Captions

利用 .carousel-caption 元素在任何 .carousel-item 中为幻灯片添加标题。可以使用类 .d-none 隐藏标题，可以使用类 .d-{breakpoint}-block 显示标题。

Captions can be added to the slides with the .carousel-caption element within any .carousel-item. The caption can be hidden using the class .d-none and can be made visible using the classes .d-{breakpoint}-block.

下面看看添加标题的示例：

Let us see an example for adding captions:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Captions</h1>
		<div id="carouselExampleCaptions" class="carousel slide bg-secondary">
		<center>
			<div id="carouselExampleCaptions" class="carousel slide bg-secondary">
                    <div class="carousel-indicators text-dark">
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"><h3>1</h3></button>
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"><h3>2</h3></button>
				        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"><h3>3</h3></button>
				    </div>
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for first slide</h5>
						<p>This is the first slide of the carousel component.</p>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for second slide</h5>
						<p>This is the second slide of the carousel component.</p>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div class="carousel-caption text-white">
						<h5>Caption for third slide</h5>
						<p>This is the third slide of the carousel component.</p>
					</div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
			  </div>
		</center>
	  </div>
  </body>
</html>

Crossfade

要将渐显过渡应用到轮播幻灯片（而非滑动），请包含 .carousel-fade 。但是，如果轮播内容仅包含文本幻灯片，则可能需要添加 .bg-body 或利用自定义 CSS 实现 .carousel-items 中的适当交叉淡出。

To apply a fade transition to your carousel slides instead of a slide, include .carousel-fade. However, if your carousel content comprises solely text slides, it may be necessary to add .bg-body or utilize custom CSS for appropriate crossfading in .carousel-items.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Animation - Fade</h1>
		<div id="carouselExampleFade" class="carousel slide">
		<center>
			<div id="carouselExampleFade" class="carousel slide carousel-fade bg-secondary">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>First slide</h2>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>Second slide</h2>
					</div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div class="carousel-caption text-white">
						<h2>Third slide</h2>
					</div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </div>
  </body>
</html>

Autoplaying carousel

  1. The carousels can be made to autoplay on page load by setting the ride option to carousel.

  2. While you hover with the mouse, the autoplaying carousels pause automatically. You can control this behavior with the option pause.

  3. The carousel will stop cycling when the webpage is not v isible (either the browser window is inactive or minimized). in case of browsers support that support the page visibility API.

下面看看自动播放轮播的示例：

Let us see an example for autoplaying carousel:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplaying</h1>
		<center>
			<div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="400" height="300" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

当 ride 选项设置为 true （而非 carousel ）时，轮播不会在页面加载时自动开始循环。它只会根据用户的交互开始。

When the ride option is set to true, instead of carousel, the carousel will not automatically start to cycle on page load. It will start only after the user’s interaction.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplaying on Ride</h1>
		<center>
			<div id="carouselExampleRide" class="carousel slide bg-secondary" data-bs-ride="true">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/scenery.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery2.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/scenery3.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" 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="#carouselExampleRide" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

Individual .carousel-item interval

要修改在自动轮播到下一项之间设定的时间量，可以向 .carousel-item 添加 data-bs-interval="" 。

To a .carousel-item add data-bs-interval="" to change the amount of time to set between automatically cycling to next item.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplay Time Interval</h1>
		<center>
			<div id="carouselExampleInterval" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active" data-bs-interval="2000">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item" data-bs-interval="2000">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="visually-hidden">Next</span>
				</button>
			  </div>
		</center>
	  </body>
</html>

Autoplaying carousel without controls

轮播也可以在没有任何控件的情况下播放。

Carousel can be played without any controls as well.

这是一个示例：

Here is an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel Autoplay without controls</h1>
		<center>
			<div id="carouselExampleSlideOnly" class="carousel slide bg-secondary" data-bs-ride="carousel">
				<div class="carousel-inner">
				  <div class="carousel-item active" data-bs-interval="2000">
					<img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item" data-bs-interval="2000">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
			  </div>
		</center>
	  </body>
</html>

Disable touch swiping

触摸屏设备可以在轮播上的幻灯片之间向左或向右滑动以进行切换。通过将 touch 选项设置为 false ，可以关闭此功能。

Touchscreen devices can swipe left or right to switch between slides on carousels. Turning off the touch option can disable this feature, by setting the value as false.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Carousel</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Carousel disable touch swiping</h1>
		<center>
			<div id="carouselExampleControlsNoTouching" class="carousel slide bg-secondary" data-bs-touch="false">
				<div class="carousel-inner">
				  <div class="carousel-item active">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>First slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/template.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Second slide</h3></p></div>
				  </div>
				  <div class="carousel-item">
					<img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="500" alt="...">
					<div><p><h3>Third slide</h3></p></div>
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Next</span>
				  </button>
			  </div>
		</center>
	  </body>
</html>

Dark variant