好的
我正在使用bootstraps轮播滑块,但使用自定义图像而不是随附的glyphicons.
然而,它的问题在于它们朝向滑块的边缘定位.左上角为左箭头,右上角为右图.
我已经尝试改变位置,但是当窗口重新调整大小时,它不会保持在它们的位置.
我不知道在哪里定位代码,以便代码忽略悬停在箭头上时出现的阴影.
这是html.
<div class="container-fluid banner_fluid"> <div class="carousel slide" data-ride="carousel" id="carousel_slider"> <div class="carousel-inner"> <div class="item active"> <img src="images/home_banner_1.jpg" alt="home slide 1" /> </div> <div class="item"> <img src="images/home_banner_2.jpg" alt="home slide 1" /> </div> <div class="item"> <img src="images/home_banner_3.jpg" alt="home slide 1" /> </div> </div> <div href="#carousel_slider" class="left carousel-control" data-slide="prev"> <span> <img src="images/chevron_left.jpg" /> </span> </div> <div href="#carousel_slider" class="right carousel-control" data-slide="next"> <span> <img src="images/chevron_right.jpg" /> </span> </div> </div> </div>
我使用开发人员工具快速查看和测试不同的选项.绝对位置不起作用.有没有其他方法可以实现它,所以它们与原始glyphicons出现在同一个位置并且也会响应?
带有建议修复的图片……
到目前为止,代码中所做的更改是在轮播控件本身的类中添加了css和img-responsive.
————- banner —————- * /
.banner_fluid { padding-left:0; padding-right:0; } .carousel-control { position: absolute; top: 50%; /* pushes the icon in the middle of the height */ z-index: 5; display: inline-block;
}
我试过的其他代码都很好,但只在桌面视图中.