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

Merge pull request #239 from seanmorley15/new_images

Browse source 
New images
This commit is contained in:
Sean Morley 2024-08-17 22:43:40 -04:00 • committed by GitHub
commit cfe14b3708
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 1117 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -129,6 +129,12 @@
dispatch('edit', adventure);
}
let currentSlide = 0;
function goToSlide(index: number) {
currentSlide = index;
}
function link() {
dispatch('link', adventure);
}
@ -153,10 +159,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"
>
<figure>
<!-- svelte-ignore a11y-img-redundant-alt -->
{#if adventure.image && adventure.image !== ''}
<img src={adventure.image} alt="Adventure Image" class="w-full h-48 object-cover" />
{#if adventure.images && adventure.images.length > 0}
<div class="carousel w-full">
{#each adventure.images as image, i}
<div
class="carousel-item w-full"
style="display: {i === currentSlide ? 'block' : 'none'}"
>
<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
<div class="flex justify-center w-full py-2 gap-2">
{#each adventure.images as _, i}
<button
on:click={() => goToSlide(i)}
class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
>
{/each}
</div>
</div>
{/each}
</div>
{:else}
<!-- svelte-ignore a11y-img-redundant-alt -->
<img
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
alt="No image available"