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 * Elements per page
*/ */
export let perPage = 2 export let perPage = 1
/** /**
* Page to start on * Page to start on
*/ */
export let initialPage = 1 export let initialPage = 1
let pagesCount = 0 let pagesCount = 0
let contentContainerWidth = 0 let contentContainerWidth = 0
let contentContainerElement let contentContainerElement

65
src/stories/ImageCarouselView.svelte
View File

@@ -9,17 +9,30 @@
/** /**
* Infinite looping * Infinite looping
*/ */
export let infinite = true; export let infinite = true;
/** /**
* Elements per page * Elements per page
*/ */
export let perPage = 2; export let perPage = 1;
/** /**
* Page to start on * Page to start on
*/ */
export let initialPage = 1 export let initialPage = 1
const colors = [
'#e5f9f0',
'#ccf3e2',
'#b2edd3',
'#99e7c5',
'#7fe1b7',
'#66dba8',
'#4cd59a',
'#32cf8b',
'#19c97d',
'#00c36f'
]
</script> </script>
<div class="main-container"> <div class="main-container">
@@ -29,36 +42,14 @@
{perPage} {perPage}
{initialPage} {initialPage}
> >
<div {#each colors as color (color)}
class="child-content-container" <div
style="background-color: green;" class="color-container"
> style="background-color: {color};"
<h1>Element 1</h1> >
</div> <p>{color}</p>
<div </div>
class="child-content-container" {/each}
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> -->
</ImageCarousel> </ImageCarousel>
</div> </div>
@@ -67,11 +58,15 @@
display: flex; display: flex;
width: 100%; width: 100%;
} }
.child-content-container { .color-container {
/* min-width: 100%; */
height: 100px; height: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.color-container > p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
font-size: 18px;
}
</style> </style>