怎么用bootstrap制作轮播图

需要准备的物品

升华文本

详细介绍方法/步骤

首先，我们需要创建一个新的html5文档，然后将bootstrap样式文件导入到该文档中，该文档包含转盘的所有样式定义，如下图所示

接下来，我们需要导入脚本文件。注意先导入jquery文件，再导入bootstrap脚本文件。顺序不能颠倒，如下图所示

，然后在主体标签中定义转盘的容器。容器的大小需要和图片大小一样，否则会出现转盘错位，效果如下图

接下来，我们将正式添加旋转木马。这里先添加三张图片。注意哪个转盘显示了直接调用bootstrap的活跃风格。

.添加转盘图片后，可以添加转盘图片的焦点。使用bootstrap中的li列表定义转盘的焦点，并注意相同数量的焦点和图片，如下图所示

转盘图中的另一个基本要素是左箭头和右箭头。通过bootstrap的转盘控制样式添加转盘图箭头，如下图所示

比较后，在我们运行程序后，您可以看到页面上如下图所示的转盘效果。您可以看到，上面提到的转盘的焦点和左右箭头显示在页面上，如下图所示