Align carousel button to the left and right side of the div container

Question

As I in the above picture I have used two buttons left and right button to scroll the images. I want to align the left and right button as shown in below image. Here is the stackblitz link. Thanks in advance!

Answer 1

You have to make a few changes, like below :

scss

1. Make .slider-container's position: relative.
2. Add a child div with class slides-container and some padding to accommodate buttons on left/right side.
3. Make .controls's position: absolute with top: 50%, so that it's always positioned in the vertical middle of .slider-container (to make this absolutely positioned, we made .slider-container relatively positioned. Because the absolutely positioned element is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block), width: 100%, so that it takes the full width of .slider-container and justify-content: space-between, so that both buttons are aligned to the extreme left and right.

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

html

1. Wrap your slides in slides-container

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

I have created a sample at stackblitz.