Question

好

我正在使用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相同的位置并且也会响应？

带有建议修正的图片... The right seems to be only problem though.

到目前为止，代码中所做的更改是在轮播控件本身的类中添加了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;

}

我尝试过的其他代码都很好，但只能在桌面视图中使用。

Answer 1

将其添加到CSS文件中：

.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}

Answer 2

根据stylesenberg的回答，您应该添加该代码，而不是调用.carousel-control，这会将整个按钮按下50％，而是调用img元素。此外，您可能希望将img元素向上移动50％的高度，以便它完全居中。

更新1：我添加了translate（-50％， - 50％），以便向左移动按钮，否则它们将被<span>元素偏移。

.carousel-control > span > img{        
    position: absolute;
    /*set position of image from top to be 50%...*/
    top: 50%;
    /*and then shift it down to make it perfectly center.*/
    transform: translate(-50%, -50%);

    z-index: 5;
    display: inline-block;
}

更新2：我刚刚意识到它可以变得更简单。由于您使用的是自定义滑块箭头，因此不需要<span>元素。所以，你的HTML代码可以简单地是：

<a class="left carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel"  role="button" data-slide="prev">
  <img src="chevron-left.png" />
</a>

<a class="right carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel"  role="button" data-slide="next">
  <img src="chevron-right.png" />
</a>

并从css中删除“span”。

bootstrap轮播滑块自定义箭头

2 个答案: