Есть слайдер построенный на bootstrap 4
в котором проблема: при прокрутке очередного слайда, плашка с текстом центрируется с визуальным прыжком.
Как сделать так, чтобы плашка была изначально отцентрирована на слайде при любом разрешении.
Вариант с подстройкой transform: translateY();
не рассматриваю, интересует грамотная адаптивность без подключения лишних библиотек сторонних слайдеров, функционал стандартного бутстраповского устраивает
#carousel {
position: relative;
}
#carousel .carousel-item {
min-height: 750px;
align-items: center;
}
#carousel .carousel-item.active {
display: flex;
align-items: center;
}
#carousel .carousel-item>img {
position: absolute;
z-index: -1;
}
#carousel .carousel-text {
color: #1d3c4c;
}
#carousel .carousel-text .col {
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
padding: 25px;
}
#carousel .carousel-text h2 {
font-weight: 700;
text-align: center;
text-transform: uppercase;
font-family: 'Raleway Bold';
}
#carousel .carousel-text h3 {
text-align: center;
font-family: 'Raleway';
text-transform: uppercase;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="carousel" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg" alt="slider1">
<div class="container">
<div class="carousel-text row">
<div class="col col-lg-8 col-12">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, excepturi.</h3>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quo.</h2>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/dead-tree-tall-portrait-view-blue-sky-background-57002950.jpg" alt="slider2">
<div class="container">
<div class="carousel-text row">
<div class="col col-lg-8 col-12">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, excepturi.</h3>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quo.</h2>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg" alt="slider3">
<div class="container">
<div class="carousel-text row">
<div class="col col-lg-8 col-12">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, excepturi.</h3>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, quo.</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</section>