bootstrap图片轮播插件carousel

第一步：设置图片轮播的容器。---其他内容都需要放置在这个容器里

采用carousel样式，给这个容器一个ID值，方便后面采用data属性触发。

第二步：设置图片轮播计数器。

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

第三步：设置轮播图片播放区

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

第四步：设置图片轮播控制器

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

一.在Vue项目中安装依赖

二.导入依赖

在main.js项目入口文件

导入全局样式

三.新建Carousel.vue组件

loop="true" :循环滚动

四.在组件中引用

根据自己的需求引用到组件中

我这里是引用到home.vue中

效果如下

---