Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。内容是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。
源代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="js/jquery.min.js"></script><script src="/popper.js/1.15.0/umd/popper.min.js"></script><script src="js/bootstrap.min.js"></script><style>.carousel-inner img {width: 100%;height:auto;z-index: 1;}*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'poppins',sans-serif;}</style></head><body><!--轮播图--><div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 指示符 --><ul class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li><li data-target="#myCarousel" data-slide-to="3"></li><li data-target="#myCarousel" data-slide-to="4"></li></ul><!-- 轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><img src=""></div><div class="carousel-item"><img src=""></div><div class="carousel-item"><img src=""></div><div class="carousel-item"><img src=""></div><div class="carousel-item"><img src=""></div></div><!-- 左右切换按钮 --><a class="carousel-control-prev" href="#myCarousel" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#myCarousel" data-slide="next"><span class="carousel-control-next-icon"></span></a></div></div><script>$('.carousel').carousel({interval: 2000,pause: null,wrap:true}) //自动轮播$(function(){// 初始化轮播$(".start-slide").click(function(){$("#myCarousel").carousel('cycle');});// 停止轮播$(".pause-slide").click(function(){$("#myCarousel").carousel('pause');});// 循环轮播到上一个项目$(".prev-slide").click(function(){$("#myCarousel").carousel('prev');});// 循环轮播到下一个项目$(".next-slide").click(function(){$("#myCarousel").carousel('next');});// 循环轮播到某个特定的帧$(".slide-one").click(function(){$("#myCarousel").carousel(0);});$(".slide-two").click(function(){$("#myCarousel").carousel(1);});$(".slide-three").click(function(){$("#myCarousel").carousel(2);});});</script></body></html>
效果图
一、通过用data属性
使用data属性可以很容易控制轮播的位置。
1、属性data-slide接受关键字pre或next，来改变轮播图相对于当前位置的位置。
2、使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从0开计数。
3、data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放了。
二、通过JavaScript来加以修饰轮播效果
轮播可以通过JavaScript手动调节
下面是一些通过data属性或JavaScript来传递的选项
下面是一些轮播插件中的有用方法：
