一文了解Bootstrap中的多种图片轮播效果

第一文了解Bootstrap中的多种图片轮播效果1轮播组件

轮播（Carousel）是一种幻灯片放映组件，用于在元素、图像或文本幻灯片（如旋转木马）之间循环播放。

carousel是一个幻灯片，用于循环播放一系列内容，使用CSS3d转换和一点JavaScript构建。它可以处理一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。

在支持页面可见性API的浏览器中，当用户看不到网页时（例如浏览器选项卡处于非活动状态、浏览器窗口最小化等），轮播将避免滑动。

轮播不会自动标准化幻灯片的尺寸。因此，您可能需要使用额外的通用类别或自定义样式将内容调整成适当的大小。虽然轮播支持上一个/下一个控件和指示器，但是它们不是必备项目。可依照需求添加和自定义。

2不同形式的轮播例子

2.1仅幻灯片的轮播

这是一个只有幻灯片的轮播。请注意在轮播图片上存在.d-block和.w-50，以避免浏览器预设的图象对齐。以下代码每隔5秒钟换一副图片。

!doctypehtml

html

head

metacharset=utf-8

metaname=viewportcontent=width=device-width,initial-scale=1

metaname=keywordscontent=

metaname=descriptioncontent=

linkhref=../bootstrap5/bootstrap.min.cssrel=stylesheet

title轮播/title

/head

body

div

brbrbr

divid=carouselExampleSlidesOnly>

2.2带上一个和下一个控件

添加上一个和下一个控件。我们建议使用button元素，但也可以将a元素与role=button一起使用。需要注意的是，要设置图片大小和宽度，需要设置carousel容器的大小，图片的设置一定要w-100，充满容器，否则下一个可能看不到。

divid=carouselExampleControls>

图片两侧的大于号和小于号就是上一个、下一个控件。

2.3带指示器

指示器就是下图中三个白色的横杠，点击可直接切换到相应图片。

divid=carouselExampleIndicators>

2.4带字幕

在任意carousel-item中使用carousel-caption替幻灯片添加字幕。可以选择使用display通用类别轻易地在较小的viewport上隐藏它们，如下所示，一开始将会用d-none隐藏，并使用d-md-block让它们在中型的设备上重新显示。

divid=carouselExampleCaptions>

2.5淡入淡出

将carousel-fade加到carousel容器中，以使用淡入淡出的取代滑动的动画效果。这部分就不演示了，包括后面两个，都是一个参数的事情。

divid=carouselExampleFade>

2.6设置时间间隔

在carousel-item上添加data-bs-interval=以更改自动循环至下一个项目的延迟时间。这个参数需要设置在每个arousel-item，时间单位是毫秒，如果设置间隔5秒，则为5000。下面是设置间隔10秒。

div>

2.7禁用触摸切换

轮播组件支持在触摸屏设备上左/右滑动以在幻灯片之间移动。这可以使用data-bs-touch属性禁用。下面的示例既不包括data-bs-ride属性，并且具有data-bs-interval=false，因此它不会自动播放。

divid=carouselExampleControlsNoTouching>

2.8暗变型

在carousel上添加carousel-dark以获得暗色系的控制项、指示器及字幕。控件已透过CSS属性filter从它们预设的白色充填反转。字幕与控件具有用来自定义color及background-color的额外变量。

我们以22.2.4例子添加carousel-dark为