Swiper CreativeEffect ведет себя неожиданно при прокрутке [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект прокрутки и прокрутки, используя swiper.js . Мне удалось заставить это работать, но только при прокрутке вниз. Теперь я хочу применить тот же эффект, но при прокрутке. Проблема заключается в том, что CreativeEffect < /code>, но после многих попыток я действительно не знаю, как я могу это сделать. PrettyPrint-Override ">

Код: Выделить всё

Swiper demo







.swiper {
width: 100%;
height: min(100vh, 100dvh);
}

.swiper-slide {
background: #fff;
}

.swiper-slide article {
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: min(100vh, 100dvh);
width: 100%;
overflow: hidden;
}

.swiper-slide article a {
display: block;
text-decoration: none;
width: 100%;
height: min(100vh, 100dvh);
position: relative;
color: inherit;
}

.swiper-slide article a figure {
margin: 0px;
aspect-ratio: unset;
height: 100%;
width: 100%;
max-width: 100%;
}

.swiper-slide article a img {
display: block;
height: 100%;
margin: 0px auto;
object-position: initial;
max-width: 100%;
object-fit: cover;
width: 100%;
}

.swiper-slide article a video {
height: 100%;
}

.swiper-button-next,
.swiper-button-prev {
color: #fff;
position: static;
transform: rotate(90deg);
width: 16px;
height: 30px;
display: block;
margin: 0;
outline: none !important;
}

.swiper-pagination-bullet {
background: #fff;
opacity: 0.3;
width: 6px;
height: 6px;
}

.swiper-pagination-vertical.swiper-pagination-bullets
.swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0;
}

.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 30px;
}

.swiper-pagination-bullet-active {
opacity: 1;
}

.swiper-pagination {
position: static;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical >  .swiper-pagination-bullets {
transform: none;
display: flex;
flex-direction: column;
gap: 12px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 1;
}

.swiper-controls {
position: absolute;
right: 22px;
top: 50%;
z-index: 1;
gap: 20px;
display: flex;
flex-direction: column;
transform: translateY(-50%);
}

.swiper .swiper-slide article {
position: relative;
}

.swiper .swiper-slide article .text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}

.swiper .swiper-slide article .text-container p {
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.45;
letter-spacing: 1px;
text-align: center;
color: #fff;
}

.swiper .swiper-slide article .text-container p:nth-child(2) {
text-decoration: underline;
text-underline-offset: 5px;
font-size: 13px;
margin-top: 10px;
}

@media screen and (min-width: 768px) {
.swiper .swiper-slide article .text-container p {
font-size: 36px;
}
}

@media screen and (min-width: 1024px) {
.swiper-controls {
display: none;
}
}




[url=#]






[/url]


[url=#]


[img]https://dummyimage.com/1024/000/fff.jpg&text=SLIDE+2[/img]
                  width="100%"
/>

[/url]


[url=#]


[img]https://dummyimage.com/1024/555/fff.jpg&text=SLIDE+3[/img]
                  width="100%"
/>

[/url]











const swiper = new Swiper(".swiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 0,
speed: 500,
effect: "creative",
mousewheel: {
forceToAxis: true,
releaseOnEdges: true,
thresholdDelta: 5,
},
creativeEffect: {
prev: {
translate: [0, 0, 0],
},
next: {
translate: [0, "100%", 0],
},
current: {
translate: [0, 0, 0],
},
},
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});


document.addEventListener("DOMContentLoaded", function () {
const mediaQuery = window.matchMedia("(min-width: 1024px)");

function updateVideoDisplay() {
document
.querySelectorAll("[data-video-mobile], [data-video-desktop]")
.forEach((video) => {
const isMobile = video.hasAttribute("data-video-mobile");
const isDesktop = video.hasAttribute("data-video-desktop");

if (mediaQuery.matches) {
if (isMobile) {
video.style.display = "none";
video.pause();
}
if (isDesktop) {
video.style.display = "block";
video.play();
}
} else {
if (isDesktop) {
video.style.display = "none";
video.pause();
}
if (isMobile) {
video.style.display = "block";
video.play();
}
}
});
}

updateVideoDisplay();

mediaQuery.addEventListener("change", updateVideoDisplay);
window.addEventListener("orientationchange", updateVideoDisplay);

document.querySelectorAll("video").forEach((video) => {
video.setAttribute("playsinline", "playsinline");
});
});

Результат моей работы можно найти на моем коде и коде.>

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