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;
}

这里是codepen，向您展示如何实现所需的效果。

幻灯片时如何更改标题照片

1 个答案: