how to make the text in the items to float above the image in SwipeJS?

September 20, 2024

I’m trying to duplicate this effect from the SwipeJS demo page, where the text floats on the bottom part, but not outside of, the image in each slide.

I’ve tried using slide-content like I see in the devtools and I also tried using title and subtitle classes like it says in the docs (in the parallax part). but they all fails, as in showing the texts below the image, instead of over the image. what am I doing wrong? any help is appreciated.

this is my code:

      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>

>Solution :

If you have set the slide-content text on images for every slide give position CSS and put it to the image’s bottom side.

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>