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

Merge branch 'main' into feature/#31_Show-pause-indicator

Browse Source 
# Conflicts:
#	src/docs/Carousel.svx
This commit is contained in:
Vadim
2021-07-07 23:22:59 +03:00
parent 4ada9137e1 4a927f8290
commit a9e878477a
8 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/docs/Carousel.svx
View File

@@ -260,8 +260,6 @@ Import component
# Props
<div class="table-wrapper">
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
@@ -276,8 +274,6 @@ Import component
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
</div>
<Divider />
# Events
@@ -285,14 +281,10 @@ Import component
## `pageChange`
Is dispatched on page change
<div class="table-wrapper">
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
| `event.detail` | `number` | Current page index |
</div>
```jsx
<Carousel
on:pageChange={
@@ -312,15 +304,11 @@ They are used for customizing prev and next buttons.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|--------------------|-------------|---------------------------------------|
| `showPrevPage` | `function` | Call it to switch to the previos page |
| `showNextPage` | `function` | Call it to switch to the next page |
</div>
```jsx
<Carousel
let:showPrevPage
@@ -341,7 +329,6 @@ Slot props:
This slot is used for customizing dots appearance.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|---------------------|---------- --|----------------------------------------------|
@@ -349,8 +336,6 @@ Slot props:
| `pagesCount` | `number` | Total pages amount |
| `showPage` | `function` | Takes index as page to be shown |
</div>
```jsx
<Carousel
let:currentPageIndex
@@ -370,14 +355,10 @@ This slot takes content for the carousel.
Slot props:
<div class="table-wrapper">
| Prop | Type | Description |
|-------------------|------------|----------------------------------------------------------------------|
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
</div>
```jsx
<Carousel
let:loaded
@@ -398,15 +379,11 @@ Navigates to a page by index
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `pageIndex` | `number` | | Page number |
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -429,14 +406,10 @@ Navigates to the previous page
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -459,14 +432,10 @@ Navigates to the next page
Arguments:
<div class="table-wrapper">
| Argument | Type | Default | Description |
|--------------------|-------------|---------|---------------------------------------|
| `options.animated` | `boolean` | `true` | Should it be animated or not |
</div>
```jsx
<script>
// ...
@@ -499,24 +468,6 @@ Arguments:
-webkit-user-drag: none;
}
/* table */
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 2px solid #009800;
}
td {
padding: 2px 10px;
}
th {
padding: 5px 10px;
}
/* custom arrows */
.custom-arrow {
width: 20px;