Проблема заключается в том, что есть slick slider, в котором 3 слайда. При выравнивании содержимого по центру, текст со всех трёх слайдов переносится на последний и накладывается друг на друга. Как можно решить проблему?
.rigsCarousel {
height: 300px;
width: 100%;
position: relative;
}
.rigsCarousel .slick-next {
position: absolute;
right: 30px;
z-index: 10;
}
.rigsCarousel .slick-prev {
position: absolute;
left: 30px;
z-index: 10;
}
.rigsCarousel .slick-dots {
position: absolute;
top: 270px;
}
.rigsCarousel img {
height: 300px;
width: 100%;
}
.rigsCarousel a {
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 200px;
}
.rigsCarousel h2 {
position: absolute;
color: white;
font-size: 52px;
left: 0;
right: 0;
text-align: center;
top: 80px;
}
.rigsCarousel p {
position: absolute;
color: white;
font-size: 30px;
left: 0;
right: 0;
text-align: center;
top: 140px;
}
<div class="rigsCarousel">
<div class="rigsCarouselItem">
<h2>Надпись 1</h2>
<p>Описание первого слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
<div class="rigsCarouselItem">
<h2>Надпись 2</h2>
<p>Описание второго слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
<div class="rigsCarouselItem">
<h2>Надпись 3</h2>
<p>Описание третьего слайда карусели</p>
<a href="#">Читать дальше</a>
<img src="{% static 'image\default_news_carousel.jpg' %}">
</div>
</div>