Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-31 02:39:38 +02:00
Code Issues Releases Activity

image card

Browse source
This commit is contained in:
Sean Morley 2024-08-17 14:34:14 -04:00
parent 167154bed4
commit 254a0d9498
1 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/lib/components/AdventureCard.svelte
View file

@ -129,6 +129,20 @@
dispatch('edit', adventure); dispatch('edit', adventure);
} }
let currentSlide = 0;
function nextSlide() {
currentSlide = (currentSlide + 1) % adventure.images.length;
}
function prevSlide() {
currentSlide = (currentSlide - 1 + adventure.images.length) % adventure.images.length;
}
function goToSlide(index: number) {
currentSlide = index;
}
function link() { function link() {
dispatch('link', adventure); dispatch('link', adventure);
} }
@ -153,27 +167,27 @@
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content" class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
> >
<figure> <figure>
<!-- svelte-ignore a11y-img-redundant-alt -->
{#if adventure.images && adventure.images.length > 0} {#if adventure.images && adventure.images.length > 0}
<div class="carousel w-full"> <div class="carousel w-full">
{#each adventure.images as image, i} {#each adventure.images as image, i}
<div id="slide{i}" class="carousel-item relative w-full">
<!-- svelte-ignore a11y-missing-attribute -->
<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
<div <div
class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between" class="carousel-item w-full"
style="display: {i === currentSlide ? 'block' : 'none'}"
> >
{#if i > 0} <img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
<a href="#slide{i - 1}" class="btn btn-circle">❮</a> <div class="flex justify-center w-full py-2 gap-2">
{/if} {#each adventure.images as _, i}
{#if i < adventure.images.length - 1} <button
<a href="#slide{i + 1}" class="btn btn-circle">❯</a> on:click={() => goToSlide(i)}
{/if} class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
>
{/each}
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
{:else} {:else}
<!-- svelte-ignore a11y-img-redundant-alt -->
<img <img
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'} src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
alt="No image available" alt="No image available"