Блог

Я создал «слайд-шоу» из трех изображений, которые повторяются каждые 5 секунд. Javascript работает должным образом, но текст, связанный с каждым изображением, не отображается поверх изображения.

index.html

 <div class="image-container">
  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
      error voluptatem voluptas neque dolor incidunt perspiciatis facere ab
      ipsam expedita.
    </div>
    <picture class="image">
      <source
        srcset="./assets/images/couple-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/couple-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/couple-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/couple-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur
      alias placeat atque animi aut. Explicabo cum facere laudantium ratione
      rem!
    </div>
    <picture class="image">
      <source
        srcset="./assets/images/men-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/men-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/men-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/men-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil
      consequatur voluptates, cupiditate mollitia quidem quod illum cum nisi
      dolore quam?
    </div>
    <picture class="image image--last">
      <source
        srcset="./assets/images/person-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/person-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/person-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/person-small_640.jpg" alt="" />
    </picture>
  </div>
</div>
  

css:

     .image-container {
      position: relative;
      amp; > div img {
        width: 100%;
      }
    
      amp;__slides {
        display: none;
    
        amp;--fade {
          img {
            opacity: 1;
          }
        }
      }
    
      amp;--text {
        position: absolute;
        background-color: #333;
        top: -50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

}
  

ImageSlider.js

 class ImageSlider {
  constructor() {
    this.slides = document.querySelectorAll(".image-container__slides");
    this.slideIndex = 0;
    this.showSlides();
  }

  showSlides() {
    let i;
    // Display all images as none
    for (i = 0; i < this.slides.length; i  ) {
      this.slides[i].style.display = "none";
    }
    this.slideIndex  ;
    // Check to see if the slideIndex is higher than number of images
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    // Assign one image to be displayed
    this.slides[this.slideIndex - 1].style.display = "block";
    // Cycle through images every 5 seconds
    setTimeout(() => {
      this.showSlides();
    }, 5000);
  }
}

export default ImageSlider;
  

То, что я пытаюсь сделать, это отобразить каждый текст поверх правильного изображения. Я думал, что если я покажу «блок», он покажет текст, но это не так. Любая помощь будет оценена с благодарностью

Происходят две вещи:

1. Вам нужно установить z-index на --text элементе.
2. У вас есть top: -50% который перемещает ваш текст из вашего элемента. Это должно быть top: 50% ;

 .image-container {
  position: relative;
  z-index: 1;
}

.image-container > div img {
  width: 100%;
}

.image-container--text {
  position: absolute;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}  

 <div class="image-container">
  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident error voluptatem voluptas neque dolor incidunt perspiciatis facere ab ipsam expedita.
    </div>
    <picture class="image">
      <img src="https://via.placeholder.com/640x640" alt="" />
    </picture>
  </div>
</div>