如何在幻灯片中更改标题照片答案

【问题标题】：How To Change Header Photo Whene Slide如何在幻灯片中更改标题照片
【发布时间】：2019-10-09 16:14:24
【问题描述】：

我使用 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 代码的情况下在 fiddle 或 sn-p 上重现你的代码吗？因为这似乎只是一个 html/css 问题
您的标题图片必须是div.swipper-slide 的一部分。我建议使用position:absolute;z-index:1; 将您的标题图像放在背景中，然后将div.text-left 和position:absolute;z-index:2 定位在框上方。我看看能不能做个demo。

标签： php html slide swiper

【解决方案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;
}

这是一个codepen，向您展示如何实现您想要的效果。

【讨论】：