I've encountered an issue where the fading effect only occurs when the page initially loads and solely on the first image. Subsequently, the fading effect does not work on any other images displayed.
This is the CSS code I have implemented by adding it to
class="banner-items fade".fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Additionally, I tried utilizing Svelte's transition:fade feature along with other techniques.
Here is the HTML component structure:
<div
class="maestro-list"
on:mouseenter={() => clearInterval(interval)} // pause and unpause
on:mouseleave={() => {
interval = setInterval(() => {
current = (current + 1) % images.length
}, delay)
}}
>
{#each images as image, index}
<transition {index} {current} {delay}>
<div class="banner-item">
<span class="pic">
<img
src={image}
alt="dragon"
loading="lazy"
style="position:relative; display: {index === current ? 'block' : 'none'}"
/>
</span>
<a class="banner_lnk" href="/">.</a>
</div>
</transition>
{/each}
<div class="num">
{#each images as _, index}
<span
class="dot"
tabindex="0"
role="button"
on:click={() => setcurrent(index)} //dot pagination
class:active={index === current}
on:keypress={(e) => {
if (e.key === "Enter") {
setcurrent(index)
}
}}
/>
{/each}
</div>
</div>
TypeScript Script:
<script lang="ts">
import { onMount, onDestroy } from "svelte"
const images: string[] = ["/img-new-fixed.png", "/placeholder-9.png"]
let current = 0
let delay = 8000 // 8 seconds
function setcurrent(index: number) {
current = index
clearInterval(interval)
interval = setInterval(transition, delay)
}
function transition() {
current = (current + 1) % images.length
}
let interval: NodeJS.Timeout
onMount(() => {
interval = setInterval(() => {
current = (current + 1) % images.length
}, delay)
})
onDestroy(() => {
clearInterval(interval)
})
</script>
One thing that comes to mind that I haven't explored yet is this example from Stack Overflow in the last answer given.
Furthermore, here's a reference where I drew inspiration for the Banner.