public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update stories

Browse Source
This commit is contained in:
Vadim
2021-01-21 20:05:34 +03:00
parent 19e8829484
commit d914301cba
2 changed files with 31 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/ImageCarousel.svelte
View File

@@ -24,14 +24,13 @@
/**
* Elements per page
*/
export let perPage = 2
export let perPage = 1
/**
* Page to start on
*/
export let initialPage = 1
let pagesCount = 0
let contentContainerWidth = 0
let contentContainerElement

55
src/stories/ImageCarouselView.svelte
View File

@@ -14,12 +14,25 @@
/**
* Elements per page
*/
export let perPage = 2;
export let perPage = 1;
/**
* Page to start on
*/
export let initialPage = 1
const colors = [
'#e5f9f0',
'#ccf3e2',
'#b2edd3',
'#99e7c5',
'#7fe1b7',
'#66dba8',
'#4cd59a',
'#32cf8b',
'#19c97d',
'#00c36f'
]
</script>
<div class="main-container">
@@ -29,36 +42,14 @@
{perPage}
{initialPage}
>
{#each colors as color (color)}
<div
class="child-content-container"
style="background-color: green;"
class="color-container"
style="background-color: {color};"
>
<h1>Element 1</h1>
<p>{color}</p>
</div>
<div
class="child-content-container"
style="background-color: yellow;"
>
<h1>Element 2</h1>
</div>
<div
class="child-content-container"
style="background-color: blue;"
>
<h1>Element 3</h1>
</div>
<div
class="child-content-container"
style="background-color: pink;"
>
<h1>Element 4</h1>
</div>
<!-- <div
class="child-content-container"
style="background-color: lightblue;"
>
<h1>Element 5</h1>
</div> -->
{/each}
</ImageCarousel>
</div>
@@ -67,11 +58,15 @@
display: flex;
width: 100%;
}
.child-content-container {
/* min-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;
}
</style>