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>