Как изменить фотографию заголовка, когда слайд

я использую ползунок 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>

Текстовое поле ползунка работает хорошо

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


php html swiper slide
person Misdan    schedule 23.05.2019    source источник
comment
Можете ли вы воспроизвести свой код на скрипке или фрагменте без php-кода? Потому что это кажется только проблемой html/css   -  person weegee    schedule 23.05.2019
comment
Изображение вашего заголовка должно быть частью файла div.swipper-slide. Я бы рекомендовал, чтобы ваше изображение заголовка с использованием position:absolute;z-index:1; было в фоновом режиме, а затем располагало div.text-left с position:absolute;z-index:2 над полем. Я посмотрю, смогу ли я создать демо.   -  person SaschaM78    schedule 23.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вот пример того, как вы можете интегрировать изображение в свой слайдер. .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;
}

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

person SaschaM78    schedule 23.05.2019