如何在SwipeJS中让item中的文字悬浮在图片上方？

问题描述 投票：0回答：1

我正在尝试从 SwipeJS 演示页面复制此效果，其中文本漂浮在每张幻灯片中的图像底部，但不在图像之外。

我已经尝试使用 

slide-content
就像我在开发工具中看到的那样，我也尝试使用 
title
和 
subtitle
类，就像文档中所说的那样（在 parallax 部分）。但它们都失败了，例如在图像下方显示文本，而不是在图像上方显示文本。我做错了什么？感谢任何帮助。

这是我的代码：

      var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
        pagination: {
          el: ".swiper-pagination",
        },
      });
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
      }

      .swiper-slide .card-img-text {
        translatey: (-50%);
        mix-blend-mode: exclusion;
      }

      .swiper-slide .card-img-text * {
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://picsum.photos/800"
            class="card-img-top"
            alt="example image 1"
          />
          <div class="slide-content">
            <h5>Slide 1 Title</h5>
            <p>Slide 1 Description</p>
          </div>
          <!-- <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> -->
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  </body>
</html>

javascript html css carousel swipe
1个回答
0
投票

如果您在每张幻灯片的图像上设置了 slide-content 文本，请指定位置 CSS 并放置

var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    },
    pagination: {
        el: ".swiper-pagination",
    },
});
html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.slide-content {
    position: absolute;
    bottom: 0;
    background: rgb(255 255 255 / 65%);
    width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://picsum.photos/800" class="card-img-top" alt="example image 1" />
            <div class="slide-content">
                <h5>Slide 1 Title</h5>
                <p>Slide 1 Description</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
            <div class="slide-content">
                <h5>Slide 2 Title</h5>
                <p>Slide 2 Description</p>
            </div>
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
            <div class="slide-content">
                <h5>Slide 3 Title</h5>
                <p>Slide 3 Description</p>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

它到图像的底部。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.