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

Question

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

Answer 1

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

scss

1. 制作 .slider-container 的 position: relative。
2. 添加一个带有 class slides-container 的子 div 和一些填充以容纳 left/right 侧的按钮。
3. 用top: 50%制作.controls的position: absolute，这样它总是位于.slider-container的垂直中间（为了绝对定位，我们制作了.slider-container relatively positioned. 因为绝对定位的元素是相对于它最接近的定位祖先定位的，如果有的话；否则，它是相对于初始包含块），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 创建了一个示例。