Swiper.js: второй слайд перекрывает первый с эффектом «затухания». ⇐ CSS

[Anonymous]

Я пытаюсь реализовать Swiper.js, но получаю ошибку: второй элемент карусели перекрывает первый. Проблема сохраняется, даже когда я использую эффект затухания.
Я пробовал отрегулировать расстояние между ними и установить его на 0, но это не решило проблему. Также убедитесь, что высота контейнера swiper и изображений правильна.
Я пробовал разные модули Swiper, такие как EffectFade, Autoplay и Pagination.
Что может быть причиной проблемы перекрытия второго элемента карусели? Как обеспечить плавный переход слайдов без перекрытия? Есть ли какая-либо недостающая конфигурация или CSS, вызывающая эту проблему?
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade, Navigation, Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import '../../../src/styles.css';
// import { useRef } from 'react';

const Hero = () => {
const cakeData = [
{
image: "/images/Category/wedding.png",
title: "Elegance in Every Layer",
subtitle: "Wedding Cakes to Remember Forever",
description:
"Celebrate your love story with a cake that’s as beautiful and unique as your special day. Handcrafted with love, our wedding cakes are designed to impress."
}, {
image: "/images/Landing/BirthdayCake-removebg.png",
title: "A Slice of Happiness",
subtitle: "Custom Cakes for Birthday Magic",
description:
"Brighten someone’s birthday with a cake tailored to their favorite flavors and styles. From kids' parties to milestone celebrations, we’ve got you covered!"
},]
// const swiperRef = useRef(null);

return (

{
// swiperRef.current = swiper; // Store the Swiper instance
// }}
modules={[EffectFade, Autoplay, Navigation, Pagination]}
className="mySwiper"
>

{cakeData.map((landing, index) =>




{landing.title}

{landing?.subtitle}


{landing.description}
Order Now





)}


)
}

export default Hero

#app { height: 100% }

html,
body {
position: relative;
height: 100%;
}

body {

font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}

.swiper {
width: auto;
height: auto;
}

.swiper-slide {
background-position: center;
background-size: cover;
}

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


Подробнее здесь: https://stackoverflow.com/questions/792 ... ade-effect