Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 14:29:36 +02:00
Code Issues Releases Activity

carousel

Browse source
This commit is contained in:
Sean Morley 2024-08-15 21:16:02 -04:00
parent 5621e90665
commit 6e39a9784d
2 changed files with 23 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -154,8 +154,25 @@
> >
<figure> <figure>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
{#if adventure.image && adventure.image !== ''} {#if adventure.images && adventure.images.length > 0}
<img src={adventure.image} alt="Adventure Image" class="w-full h-48 object-cover" /> <div class="carousel w-full">
{#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
class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
>
{#if i > 0}
<a href="#slide{i - 1}" class="btn btn-circle">❮</a>
{/if}
{#if i < adventure.images.length - 1}
<a href="#slide{i + 1}" class="btn btn-circle">❯</a>
{/if}
</div>
</div>
{/each}
</div>
{:else} {:else}
<img <img
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'} src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}

5
frontend/src/lib/types.ts
View file

@ -19,7 +19,10 @@ export type Adventure = {
description?: string | null; description?: string | null;
rating?: number | null; rating?: number | null;
link?: string | null; link?: string | null;
image?: string | null; images: {
id: string;
image: string;
}[];
date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
collection?: string | null; collection?: string | null;
latitude: number | null; latitude: number | null;