Как я могу создать горизонтальную двухнаправленную бесконечную галерею прокрутки с ручной прокруткой? (стрте) ⇐ CSS

[Anonymous]

Я пытаюсь создать горизонтальную галерею изображений, чтобы пользователь мог вручную прокручивать в обоих направлениях и покажет одни и те же изображения снова и более бесконечно. но не поддерживается левой прокрутки. 0.
Как я могу это исправить?
import Image from "$lib/image.svelte";
import { imagesState } from "../store";
import { onMount } from "svelte";

let error = null;

async function fetchImages() {
try {
const data = await fetch('/api/');
if (!data.ok) throw new Error("Failed to feath images.");
const files = await data.json();
console.log('files:', files.tree);
return files.tree;

} catch (err: unknown) {
if (err instanceof Error) {
error = err.message;
} else {
error = String(err); // Handle unexpected error types
}
}
}

let gallery:HTMLElement | null = null;

function handleScroll(event: Event) {
if (Math.abs(event.deltaX) > Math.abs(event.deltaY) && Math.abs(event.deltaX) > 0) {
scrollDirection = event.deltaX > 0 ? "right" : "left";
console.log("Scroll direction:", scrollDirection);
}
}

function observeImages() {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.classList.toggle('show', entry.isIntersecting)
if (!entry.isIntersecting) return;
console.log('entry:', entry, "type:", typeof entry)
const clone = entry.target.cloneNode(true) as Element;
console.log('clone:', clone)
gallery?.append(clone);
observer.observe(clone);
})
}, {
root: gallery,
threshold: 0.2,
})
if(gallery){
for(let child of gallery.children){
observer.observe(child);
}
}
}

onMount(async () => {
console.log("mount");
gallery = document.getElementById('galleryCont');
if(gallery) {
gallery.addEventListener('wheel', handleScroll);
gallery.addEventListener('touchmove', handleScroll)
}
await imagesState.set(await fetchImages())
observeImages();
return () => {
if(gallery) {
gallery.removeEventListener('wheel', handleScroll);
gallery.removeEventListener('touchmove', handleScroll);
}
}
});





{#if $imagesState}
{#each $imagesState as image}

{/each}
{/if}



< /code>
css: < /p>
.image {
transform: translateY(300px);
opacity: 0;
transition: 300ms;
}

.image.show {
transform: translateY(0px);
opacity: 1;
}
< /code>
Компонент изображения: < /p>

export let imgSrc:string = ""
export let imgAlt:string = ""



< /code>
Что я попробовал < /h1>
Я попытался программно удалять изображения из DOM после того, как они больше не пересекают и регулировали значение Scrollleft к соответствующему значению, и это почти работало, но приводило к приводу к внедрению «мигание», где неверное изображение будет появляться в каждом плате, даже после того, как использовалось, что было знакомо. был. Я заглушил эффект, но по какой -то причине я не мог выяснить, что эффект был удвоен (перемещая одну картину дальше после активации, а затем снова после увеличения времени дроссельной заслонки).

Подробнее здесь: https://stackoverflow.com/questions/794 ... with-manua