0

Проблема заключается в том, что есть 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>

1 ответ 1

0

Вобщем очень долго бился с этой проблемой, в итоге решение довольно простое. HTML документ остался без изменений

.rigsCarousel {
  height: 300px;
  width: 100%;
}

.rigsCarousel img {
  height: 300px;
  width: 100%;
}

.rigsCarouselItem {
  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 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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.