将轮播按钮与 div 容器的左侧和右侧对齐
Align carousel button to the left and right side of the div container
正如我在上图中使用了两个按钮 left
和 right
按钮来滚动图像。我想对齐左右按钮,如下图所示。这是 stackblitz link。提前致谢!
您必须进行一些更改,如下所示:
scss
- 制作
.slider-container
的 position: relative
。
- 添加一个带有 class
slides-container
的子 div 和一些填充以容纳 left/right 侧的按钮。
- 用
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
- 将您的
slides
包裹在 slides-container
中
<div class="slider-container">
<div class="slides-container">
<div class="slides" #slides>
...
</div>
</div>
...
</div>
我在 stackblitz 创建了一个示例。
正如我在上图中使用了两个按钮 left
和 right
按钮来滚动图像。我想对齐左右按钮,如下图所示。这是 stackblitz link。提前致谢!
您必须进行一些更改,如下所示:
scss
- 制作
.slider-container
的position: relative
。 - 添加一个带有 class
slides-container
的子 div 和一些填充以容纳 left/right 侧的按钮。 - 用
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
- 将您的
slides
包裹在slides-container
中
<div class="slider-container">
<div class="slides-container">
<div class="slides" #slides>
...
</div>
</div>
...
</div>
我在 stackblitz 创建了一个示例。