crm-web/src/lib/components/ui/Slider.svelte

<script lang="ts">
    import { onMount } from "svelte";
    let currentIndex = 0;
    const images = ["/test/test.png", "/test/test002.jpg"];

    function nextSlide() {
        currentIndex = (currentIndex + 1) % images.length;
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
    }

    function handleWheel(event: WheelEvent) {
        // Прокрутка вниз (deltaY > 0) — следующий слайд
        // Прокрутка вверх (deltaY < 0) — предыдущий слайд
        if (event.deltaY > 0) {
            nextSlide();
        } else if (event.deltaY < 0) {
            prevSlide();
        }
    }

    // Добавляем обработчик события wheel при монтировании компонента
    onMount(() => {
        const slider = document.querySelector(".slider-container");
        if (slider instanceof HTMLElement) {
            slider.addEventListener("wheel", handleWheel as EventListener);
        }
        // Очищаем обработчик при размонтировании
        return () => {
            if (slider instanceof HTMLElement) {
                slider.removeEventListener(
                    "wheel",
                    handleWheel as EventListener,
                );
            }
        };
    });
</script>

<div class="slider-container relative w-full max-w-2xl mx-auto">
    <div class="overflow-hidden rounded-lg">
        <img
            src={images[currentIndex]}
            alt="Slide"
            class="w-full h-64 object-cover"
        />
    </div>
    <button
        on:click={prevSlide}
        class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-r"
    >
        ←
    </button>
    <button
        on:click={nextSlide}
        class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-l"
    >
        →
    </button>
</div>