<section class="slider">
<div class="carousel" id="carousel">
<div class="carousel-item">
<span class="banner__text">Unique and Modern Design 3</span>
<span class="lg">Portfolio PSD Template</span>
<span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
<button href="#" class="btn btn--head">Get Started</button>
</div>
<div class="carousel-item">
<span class="banner__text">Unique and Modern Design 3</span>
<span class="lg">Portfolio PSD Template</span>
<span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
<button href="#" class="btn btn--head">Get Started</button>
</div>
<div class="carousel-item">
<span class="banner__text">Unique and Modern Design 3</span>
<span class="lg">Portfolio PSD Template</span>
<span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
<button href="#" class="btn btn--head">Get Started</button>
</div>
</div>
<img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()">
<img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()">
<div class="dots">
<div class="dots-item active"></div>
<div class="dots-item"></div>
<div class="dots-item"></div>
</div>
</section>
.slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-attachment: fixed;
background-size: cover;
background-blend-mode: multiply;
background-color: rgba(0, 0, 0, 0.5);
background: url("../../img/back.png") no-repeat center top;
}
.carousel {
width: 300%;
position: absolute;
top: 0;
left: 0%;
height: 100%;
display: flex;
transition: .3s ease-out;
text-align: center;
-ms-align-items: center;
align-items: center;
margin: 381px 0;
}
.carousel-item {
width: calc(100% / 3);
height: 100%;
}
.carouserl-item img {
width: 100%;
height: 100%;
}
.arrow {
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
background-color: rgba(0, 0, 0, .3);
padding: 15px;
border-radius: 50%;
top: calc(50% - 35px);
cursor: pointer;
}
.arrow--left {
left: 5%;
}
.arrow--right {
right: 5%;
transform: rotate(180deg);
}
.dots {
position: absolute;
display: flex;
justify-content: center;
z-index: 2;
bottom: 20px;
width: 100%;
}
.dots-item {
width: 15px;
height: 15px;
background-color: rgba(0, 0, 0, .7);
border-radius: 50px;
cursor: pointer;
margin: 0 5px;
transition: .2s ease-out;
}
.dots-item.active {
border: 2px solid rgba(0, 0, 0, .7);
background-color: transparent;
}
.slider-item {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: none;
animation: fade .3s ease-out;
}
.slider-item.active {
display: block;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Слайдер работает как надо, но как расположить кнопку под текстом? Она у меня идет справа от .sm, надо чтоб по середине
div
тогда она сама упадёт в низ