本文介绍了如何使用Bootstrap实现轮播图，并详细讲解了不显示左右切换箭头的解决方案。通过修改`.carousel-control-prev`和`.carousel-control-next`的CSS样式，以及对`.carousel-indicators li`的border-color设置，可以定制轮播图的外观，使其更符合设计需求。同时，提供了在鼠标悬停时增大切换按钮尺寸的过渡效果。
Bootstrap 实现轮播图 & 不显示左右切换箭头解决方法 (这是最终版)
banner.banner {
position: relative;
}
.carousel-control-prev {
position: absolute;
top: 50%;
left: 10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, .1);
border-radius: 50%;
font-size: 26px;
margin-top: -13px;
transition: all 0.3s linear;
}
.carousel-control-next {
position: absolute;
top: 50%;
right: 10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 26px;
background-color: rgba(0, 0, 0, .1);
border-radius: 50%;
margin-top: -13px;
transition: all 0.3s linear;
}
.carousel-control-prev:hover,
.carousel-control
最低0.47元/天 解锁文章
扫一扫
5219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
