/
Netrunners
/
Millenium_UI
Обзор
Документация
Войти
/
Netrunners
/
Millenium_UI
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/lib/components/common/SlideShow.svelte
39 строк
976 B
Валерий Конюхов
first_commit
08 июл 2025, 22:20
08 июл 2025, 22:20
a4e8dc9
Код
Авторство
О чём код?
<script lang="ts"> import { onMount } from 'svelte'; export let imageUrls = [ '/assets/images/adam.jpg', '/assets/images/galaxy.jpg', '/assets/images/earth.jpg', '/assets/images/space.jpg' ]; export let duration = 5000; let selectedImageIdx = 0; onMount(() => { setInterval(() => { selectedImageIdx = (selectedImageIdx + 1) % (imageUrls.length - 1); }, duration); }); </script> {#each imageUrls as imageUrl, idx (idx)} <div class="image w-full h-full absolute top-0 left-0 bg-cover bg-center transition-opacity duration-1000" style="opacity: {selectedImageIdx === idx ? 1 : 0}; background-image: url('{imageUrl}')" ></div> {/each} <style> .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; /* Center the background images */ transition: opacity 1s ease-in-out; /* Smooth fade effect */ opacity: 0; /* Make images initially not visible */ } </style>