Как изменить фотографию заголовка Whene Slide

Question

Я использую слайдер Swiper, чтобы сделать слайд профиля, JavaScript является стандартным, как в этом github

https://github.com/nolimits4web/Swiper/blob/master/demos/390-autoheight.html

это изображение с моей страницы

я использую вот так для фотографии заголовка

<div class="row">
    <div class="col-12 p-0">
      <img class="kol1">
    </div>
  </div>

и это для текстового поля

 <!--text-->
  <div class="col-12 bg-text-kol">
      <div class="swiper-container swiper2" >
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <div class="text-left">
              </br>
              <h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
              <a href="<?php echo "https://www.instagram.com/".$this->lang->line('kol_15_ig') ?>" target="_blank"><?php echo '@'.$this->lang->line('kol_15_ig'); ?></a>
              <p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
              <p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
              </br>
            </div>
          </div>

      </div>
      <!-- Add Pagination-->
      <div class="swiper-pagination"></div>
    </div>
  </div>

Текстовое поле слайдерахорошо работает

мой вопрос: как каждый раз, когда я меняю заголовок слайд-фотографии, меняюсь каждый раз, когда я делаю слайд?

Answer 1

Вот пример того, как вы можете интегрировать изображение в слайдер..text-left расположен абсолютно внутри контейнера .testamonial над всем другим содержимым внутри него.

HTML-код:

<div class="swiper-slide">
  <div class="testamonial">
    <div class="banner">
      Get your free Engrave
    </div>
    <div class="photo">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/88/MagooAndDog.jpg"/></div>
    <div class="text-left">
      <h2 class="h5 mt-3">Mr. Triples</h2>
      <a href="https://www.instagram.com/" target="_blank">@mr_triples</a>
      <p class="mark-bold">Content User</p>
      <p class="mt-3">Not that much here.</p>
    </div>
  </div>
</div>

CSS-код:

.photo {
  width: 300px;
  height: 300px;
  max-width: 300px;
  overflow: hidden;
}
.banner {
  background-color: orange;
  padding: 5px;
}
.text-left {
  text-align: left;
  position: absolute;
  width: 200px;
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(255,255,255,0.8);
  bottom: 0;
  left: 30px;
  padding: 10px;
  padding-top: 20px;
  min-height: 100px;
}

Вот кодекс , чтобы показать, как можно достичь желаемого эффекта.