bootstrap图片轮播插件carousel

Posted 2023-03-03

参考技术A 第一步：设置图片轮播的容器。---其他内容都需要放置在这个容器里
采用carousel样式，给这个容器一个ID值，方便后面采用data属性触发。

第二步：设置图片轮播计数器。
在容器div.carousel的内部添加图片轮播计时器，采用carousel-indicators样式，一般用ol有序列表（有几张图片放置几个li），以白点的形式展示(具体样式在bootstrap.css文件第5835行起)

第三步：设置轮播图片播放区
最关键的区域，主要用来放置需要轮播的图片，用carousel-inner样式控制，用item容器放置每张轮播的图片。

第四步：设置图片轮播控制器
一般图片轮播会有一个向前向后播放的控制器，在此，用carousel-control样式配合left、right来实现。