73 lines
1.3 KiB
Svelte
73 lines
1.3 KiB
Svelte
<script>
|
|
// TODO: rename image carousel to just carousel
|
|
import { onMount } from 'svelte'
|
|
import { store } from './store'
|
|
|
|
/**
|
|
* Enable Next/Prev arrows
|
|
*/
|
|
export let arrows = true;
|
|
|
|
/**
|
|
* Infinite looping
|
|
*/
|
|
export let infinite = true;
|
|
|
|
let contentContainerElement
|
|
let children
|
|
onMount(() => {
|
|
children = contentContainerElement.children
|
|
})
|
|
|
|
function handlePrevClick() {
|
|
store.prev({ infinite })
|
|
}
|
|
function handleNextClick() {
|
|
store.next({ infinite })
|
|
}
|
|
</script>
|
|
|
|
<div class="main-container">
|
|
{#if arrows}
|
|
<div class="side-container">
|
|
<span
|
|
class="clickable"
|
|
on:click={handlePrevClick}
|
|
><</span>
|
|
</div>
|
|
{/if}
|
|
<div class="content-container" bind:this={contentContainerElement}>
|
|
<slot></slot>
|
|
</div>
|
|
{#if arrows}
|
|
<div class="side-container">
|
|
<span
|
|
class="clickable"
|
|
on:click={handleNextClick}
|
|
>></span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.main-container {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.content-container {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
.side-container {
|
|
background-color: cornflowerblue;
|
|
height: 100%;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
</style> |