Swiper.js Slides, исчезающие во время перехода в React (Vite + Swiper 11) ⇐ Javascript

[Anonymous]

Я использую swiper.js v11 с React и Vite, и я сталкиваюсь с двумя проблемами: < /p>

Предметы, переполненные Swiper-wrapper на больших экранах. /> < /ol>
Проблемные наблюдения: < /p>

Во время переходов на промежутках на мгновение исчезает слайд. добавить, хотя я не определял их в CSS. alt = "Слайд изображение после" src = "https://i.sstatic.net/cwbu9isg.png"/>
reviewswiper
import { useEffect, useRef } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

function calculateSpaceBetween() {
const width = window.innerWidth;
if (width >= 1440) return Math.max(20, Math.min((width * 1.38) / 100, 30));
else if (width >= 768) return Math.max(10, Math.min((width * 1.3) / 100, 20));
else return 10;
}

export default function ReviewSwiper({ children }: { children: React.ReactNode }) {
const swiperRef = useRef(null);

useEffect(() => {
if (!swiperRef.current) return;

const swiperInstance = new Swiper(swiperRef.current, {
loop: true,
slidesPerView: 'auto',
spaceBetween: calculateSpaceBetween(),
pagination: {
el: '.review-swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.review-swiper-button-next',
prevEl: '.review-swiper-button-prev',
},
scrollbar: {
el: '.review-swiper-scrollbar',
},
});

const resizeHandler = () => {
swiperInstance.params.spaceBetween = calculateSpaceBetween();
swiperInstance.update();
};

window.addEventListener('resize', resizeHandler);
return () => {
window.removeEventListener('resize', resizeHandler);
swiperInstance.destroy(true, true);
};
}, []);

return (

{children}

);
}

использование


{items.map((item, index) => (



{item.name}
{item.company}










{item.review}

))}



css
.swiper {
&-slide { width: auto; height: auto !important; }
&-button-prev, &-button-next {
color: transparent;
top: unset;
left: unset;
right: unset;
bottom: unset;
transform: unset;
margin: unset;
z-index: unset;
}
&-button-prev { margin-right: clamp(12px, 0.83vw, 16px); }
&-items-wrapper { @include screens.max-md { display: flex; justify-content: center; }}
}
< /code>
&__review-items-container {
display: flex;
justify-content: space-between;
align-items: stretch;
margin-top: clamp(24px, 6vw, 30px);
overflow: hidden;
@include screens.min-smd {
gap: clamp(10px, 1.3vw, 20px);
}
@include screens.min-md {
gap: clamp(20px, 1.38vw, 30px);
}

&__item {
display: flex !important;
flex-direction: column;
flex: 0 0 100%;
gap: clamp(24px, 1.5vw, 30px);
background-color: var(--color-peach-96);
border-radius: 10px;
padding: clamp(40px, 2.5vw, 50px);
gap: clamp(24px, 1.5vw, 30px);

@include screens.min-smd {
text-align: left;
flex: 0 0 calc((100% - 1.3vw) / 2);
}
@include screens.min-md {
flex: 0 0 calc((100% - 2.76vw) / 3);
}

&__header-container {
display: flex;
align-items: center;
justify-content: space-between;

&__info-container {
text-align: left;
&__title {
font-weight: 500;
color: var(--color-grey-20);
}

&__slug {
font-weight: 400;
color: var(--color-grey-40);
}
}

&__profile-container {
display: flex;
align-items: center;
gap: clamp(8px, 0.5vw, 10px);

&__item-container {
display: grid;
place-items: center;
border: 1px solid var(--color-peach-90);
border-radius: 8px;
width: clamp(44px, 3vw, 52px);
height: clamp(44px, 3vw, 52px);

&__item {
color: var(--color-purple-50);
width: clamp(24px, 1.5vw, 28px);
height: clamp(24px, 1.5vw, 28px);
}
}
}
}

&__content {
text-align: left;
flex: 1;
font-weight: 400;
color: var(--color-grey-30);
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... -swiper-11