151 lines
2.8 KiB
Svelte
151 lines
2.8 KiB
Svelte
<script>
|
|
import Carousel from '../Carousel.svelte'
|
|
|
|
/**
|
|
* CSS animation timing function
|
|
*/
|
|
export let timingFunction = 'ease-in-out';
|
|
|
|
/**
|
|
* Enable Next/Previos arrows
|
|
*/
|
|
export let arrows = true;
|
|
|
|
/**
|
|
* Infinite looping
|
|
*/
|
|
export let infinite = true;
|
|
|
|
/**
|
|
* Page to start on
|
|
*/
|
|
export let initialPageIndex = 1
|
|
|
|
/**
|
|
* Transition duration (ms)
|
|
*/
|
|
export let duration = 500
|
|
|
|
/**
|
|
* Enables auto play of pages
|
|
*/
|
|
export let autoplay = false
|
|
|
|
/**
|
|
* Autoplay change interval
|
|
*/
|
|
export let autoplayDuration = 3000
|
|
|
|
/**
|
|
* Autoplay change direction ('next', 'prev')
|
|
*/
|
|
export let autoplayDirection = 'next'
|
|
|
|
/**
|
|
* Pause autoplay on focus
|
|
*/
|
|
export let pauseOnFocus = false
|
|
|
|
/**
|
|
* Show autoplay duration progress indicator
|
|
*/
|
|
export let autoplayProgressVisible = false
|
|
|
|
/**
|
|
* Current page indicator dots
|
|
*/
|
|
export let dots = true
|
|
|
|
function onPageChange(event, showPage) {
|
|
showPage(Number(event.target.value))
|
|
}
|
|
|
|
const colors = [
|
|
'#e5f9f0',
|
|
'#ccf3e2',
|
|
'#b2edd3',
|
|
'#99e7c5',
|
|
'#7fe1b7',
|
|
'#66dba8',
|
|
'#4cd59a',
|
|
'#32cf8b',
|
|
'#19c97d',
|
|
'#00c36f'
|
|
]
|
|
</script>
|
|
|
|
<div class="main-container">
|
|
<Carousel
|
|
{timingFunction}
|
|
{arrows}
|
|
{infinite}
|
|
{initialPageIndex}
|
|
{duration}
|
|
{autoplay}
|
|
{autoplayDuration}
|
|
{autoplayDirection}
|
|
{pauseOnFocus}
|
|
{autoplayProgressVisible}
|
|
{dots}
|
|
let:currentPageIndex
|
|
let:pagesCount
|
|
let:showPage
|
|
>
|
|
{#each colors as color (color)}
|
|
<div
|
|
class="color-container"
|
|
style="background-color: {color};"
|
|
>
|
|
<p>{color}</p>
|
|
</div>
|
|
{/each}
|
|
<div slot="dots">
|
|
<div class="select-container">
|
|
<select
|
|
value={currentPageIndex}
|
|
on:change="{(event) => onPageChange(event, showPage)}"
|
|
on:blur="{(event) => onPageChange(event, showPage)}"
|
|
>
|
|
{#each Array(pagesCount) as _, pageIndex (pageIndex)}
|
|
<option value={pageIndex} class:active={currentPageIndex === pageIndex}>
|
|
{pageIndex}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
|
|
<style>
|
|
.main-container {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.color-container {
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.color-container > p {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-style: italic;
|
|
font-size: 18px;
|
|
}
|
|
.active {
|
|
background-color: grey;
|
|
color: white;
|
|
}
|
|
|
|
.select-container {
|
|
padding: 5px 0;
|
|
}
|
|
.select-container > select {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-style: italic;
|
|
height: 25px;
|
|
width: 100px;
|
|
border-radius: 5px;
|
|
}
|
|
</style> |