bootstrap轮播图组件
一、轮播图组件模板(官方文档)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图片及说明文字 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="图片1"> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="图片2"> <div class="carousel-caption"> ... </div> </div> </div> <!-- 控制按钮:左右切换 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
二、分析轮播图组件结构
①carousel 轮播图的模块, slide是否加上滑动效果,data-ride="carousel" 初始化轮播图属性
②data-target="#carousel-example-generic" 控制目标轮播图,data-slide-to="数字" 控制的是轮播图当中的第几张 (索引),class="active" 当前选中的点
③role="listbox" 提供给屏幕阅读器使用,class="carousel-inner"需要轮播的容器,每一个容器里class="item"包括轮播图片img和图片的说明性文字carousel-caption
④left carousel-control是切换上一张的按钮,right carousel-control是切换下一张的按钮,其中的data-slide="next/prev"声明左滑还是右滑,aria-hidden和sr-only是提供给屏幕阅读器使用
三、精简版轮播图模板
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图片及说明文字 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="图片1"> </div> <div class="item"> <img src="..." alt="图片2"> </div> <div class="item"> <img src="..." alt="图片3"> </div> </div> <!-- 控制按钮:左右切换 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
四、例子:在PC端使用轮播图(高度固定,图片居中,容器铺满,使用背景图)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图片及说明文字 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <a href="#" class="pc_imgBox" style="background-image: url('images/2-1.png')"></a> </div> <div class="item"> <a href="#" class="pc_imgBox" style="background-image: url('images/2-2.png')"></a> </div> <div class="item"> <a href="#" class="pc_imgBox" style="background-image: url('images/2-3.png')"></a> </div> </div> <!-- 控制按钮:左右切换 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
.pc_imgBox{ display: block; height: 400px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .carousel-indicators{ background: #ccc; }
五、例子:在移动端使用轮播图(宽度自适应,高度自动变化,使用img引入图片)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图片及说明文字 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <a href="#" class="pc_imgBox"><img src="images/1-1.png" alt=""></a> </div> <div class="item"> <a href="#" class="m_imgBox"><img src="images/1-2.png" alt=""></a> </div> <div class="item"> <a href="#" class="m_imgBox"><img src="images/1-3.png" alt=""></a> </div> </div> <!-- 控制按钮:左右切换 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
.m_imgBox{ display: block; width: 100%; } .carousel-indicators{ background: #ccc; }
六、例子:响应式的轮播图(利用媒体查询自适应PC端和移动端)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 轮播图片及说明文字 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-1.png')"></a> <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-1.png" alt=""></a> </div> <div class="item"> <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-2.png')"></a> <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-2.png" alt=""></a> </div> <div class="item"> <a href="#" class="pc_imgBox hidden-xs" style="background-image: url('images/2-3.png')"></a> <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="images/1-3.png" alt=""></a> </div> </div> <!-- 控制按钮:左右切换 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
.pc_imgBox{ display: block; height: 400px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .m_imgBox{ display: block; width: 100%; } .carousel-indicators{ background: #ccc; }
【转载文章务必保留出处和署名,谢谢!】
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步