146 lines
3.6 KiB
Svelte
146 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import arrowRightUrl from "$lib/assets/arrow_right.svg";
|
|
import crossUrl from "$lib/assets/cross.svg";
|
|
import { onMount } from "svelte";
|
|
|
|
interface Props {
|
|
urls?: string[];
|
|
ondelete?: (idx: number) => void;
|
|
}
|
|
|
|
const { urls = [], ondelete }: Props = $props();
|
|
let carousel = $state<HTMLDivElement>();
|
|
let scrollPosition = $state(0);
|
|
let scrollWidth = $state(0);
|
|
let clientWidth = $state(1);
|
|
function updateScroll() {
|
|
scrollPosition = carousel?.scrollLeft || 0;
|
|
scrollWidth = carousel?.scrollWidth || 0;
|
|
clientWidth = carousel?.clientWidth || 1;
|
|
}
|
|
onMount(() => {
|
|
const id = setInterval(() => {
|
|
if (carousel) {
|
|
updateScroll();
|
|
}
|
|
}, 1000);
|
|
return () => clearInterval(id);
|
|
});
|
|
</script>
|
|
|
|
<div class="controls">
|
|
<div class="carousel" bind:this={carousel} onscroll={updateScroll} onscrollend={updateScroll}>
|
|
{#each urls as url, idx (`${idx}|${url}`)}
|
|
<div class="item">
|
|
<img src={url} alt="carousel item" />
|
|
{#if ondelete}
|
|
<button class="delete" onclick={() => ondelete(idx)}>
|
|
<img src={crossUrl} alt="delete item" />
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{#if scrollPosition > clientWidth / 2}
|
|
<button
|
|
class="arrow left"
|
|
onclick={(e) => {
|
|
e.preventDefault();
|
|
if (carousel) carousel.scrollLeft -= carousel.clientWidth;
|
|
}}
|
|
>
|
|
<img src={arrowRightUrl} alt="go to previous" />
|
|
</button>
|
|
{/if}
|
|
{#if scrollPosition < scrollWidth - clientWidth * 1.5}
|
|
<button
|
|
class="arrow right"
|
|
onclick={(e) => {
|
|
e.preventDefault();
|
|
if (carousel) carousel.scrollLeft += carousel.clientWidth;
|
|
}}
|
|
>
|
|
<img src={arrowRightUrl} alt="go to next" />
|
|
</button>
|
|
{/if}
|
|
<span class="position">
|
|
{Math.round(scrollPosition / clientWidth) + 1} / {urls.length}
|
|
</span>
|
|
</div>
|
|
|
|
<style>
|
|
.carousel {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
}
|
|
.controls {
|
|
position: relative;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
scroll-snap-align: center;
|
|
}
|
|
.item img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.delete,
|
|
.position,
|
|
.arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
z-index: 10;
|
|
border: none;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 9999px;
|
|
}
|
|
.arrow,
|
|
.delete {
|
|
cursor: pointer;
|
|
width: 2rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
.arrow img,
|
|
.delete img {
|
|
width: 1.4rem;
|
|
}
|
|
.arrow:hover {
|
|
opacity: 0.8;
|
|
}
|
|
.arrow.left {
|
|
left: 0.2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.arrow.left img {
|
|
transform: rotate(180deg);
|
|
}
|
|
.arrow.right {
|
|
right: 0.2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.delete {
|
|
top: 0.4rem;
|
|
right: 0.2rem;
|
|
}
|
|
.position {
|
|
font-size: 0.8rem;
|
|
top: 0.4rem;
|
|
border-radius: 1rem;
|
|
left: 0.2rem;
|
|
padding: 0.3rem 0.5rem;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
</style>
|