angular - 将轮播按钮与 div 容器的左侧和右侧对齐

Question

如上图所示，我使用了两个按钮left和right按钮来滚动图像。我想对齐左右按钮，如下图所示。这是 stackblitz链接。提前致谢！

Answer 1

您必须进行一些更改，如下所示：

scss

1. 做.slider-container的position: relative。
2. 添加一个带有类和一些填充的子 divslides-container以容纳左侧/右侧的按钮。
3. Make .controls's position: absolutewith top: 50%, 这样它总是定位在.slider-container(为了使这个绝对定位，我们做了.slider-container相对定位。因为绝对定位的元素是相对于它最近的定位祖先定位的，如果有的话；否则，它是相对定位的到初始包含块), width: 100%, 使其占据 和 的全宽.slider-container,justify-content: space-between使两个按钮都对齐到最左端和最右端。

.slider-container{
    ...
    position: relative;
    .slides-container{
        padding: 0 70px;
    }
    ...
}
...
.controls {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 50%;
}

html

1. 包裹你slides的slides-container

<div class="slider-container">
    <div class="slides-container">
        <div class="slides" #slides>
            ...
        </div>
    </div>
...
</div>

我在stackblitz创建了一个示例。