Spaces:
Build error
Build error
File size: 976 Bytes
3b623f5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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>
|