主页 / 问题 / 1126987
Accepted
ItsIIIyTh1K
Asked:2020-05-17 19:35:04 +0000 UTC2020-05-17 19:35:04 +0000 UTC

轮播中的文字相互重叠

  • 772

问题是有一个光滑的滑块有 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>

html

1 个回答

  1. Best Answer

    总的来说，我在这个问题上挣扎了很长时间，因此解决方案非常简单。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;
}
    • 0

相关问题