Совместите кнопку карусели с левой и правой стороны контейнера div

Question

Как и на картинке выше, я использовал две кнопки left и right для прокрутки изображений.Я хочу выровнять левую и правую кнопки, как показано на рисунке ниже.Вот ссылка на стек ссылка .Заранее спасибо!

Answer 1

Вы должны внести несколько изменений, как показано ниже:

scss

1. Make .slider-container s position: relative.
2. Добавьте дочерний элемент div с классом slides-container и некоторые отступы для размещения кнопок слева / справа.
3. Создайте .controls s position: absolute с 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 .