252 lines
5.8 KiB
Plaintext
252 lines
5.8 KiB
Plaintext
<script>
|
|
import _ from 'lodash'
|
|
import Carousel from '../components/Carousel/Carousel.svelte'
|
|
import Color from './Color.svelte'
|
|
import AlbumsPreview from './AlbumsPreview/AlbumsPreview.svelte'
|
|
import Divider from './Divider.svelte'
|
|
|
|
const colors = [
|
|
{ color: '#85d78b', text: '#85d78b' },
|
|
{ color: '#71d077', text: '#71d077' },
|
|
{ color: '#5dca64', text: '#5dca64' },
|
|
{ color: '#49c351', text: '#49c351' },
|
|
{ color: '#35bd3e', text: '#35bd3e' },
|
|
{ color: '#2faa37', text: '#2faa37' },
|
|
{ color: '#2a9731', text: '#2a9731' },
|
|
{ color: '#25842b', text: '#25842b' },
|
|
{ color: '#1f7125', text: '#1f7125' },
|
|
]
|
|
|
|
const images = [
|
|
'https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg',
|
|
'https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg',
|
|
'https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg',
|
|
'https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg',
|
|
'https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg'
|
|
]
|
|
</script>
|
|
|
|
# Features
|
|
|
|
## Single item
|
|
<Carousel>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
<Divider />
|
|
|
|
## Multiple items
|
|
<Carousel>
|
|
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
|
|
<div style="display: flex;">
|
|
{#each colorsChunk as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel>
|
|
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
|
|
<div style="display: flex;">
|
|
{#each colorsChunk as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
<Divider />
|
|
|
|
## Autoplay
|
|
<Carousel
|
|
autoplay={true}
|
|
autoplaySpeed={2000}
|
|
>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel
|
|
autoplay={true}
|
|
autoplaySpeed={2000}
|
|
>
|
|
{#each colors as { color, text } (color)}
|
|
<Color {color} {text} />
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
<Divider />
|
|
|
|
## Lazy loading
|
|
<Carousel
|
|
let:loaded
|
|
>
|
|
{#each images as src, imageIndex (src)}
|
|
<div class="img-container">
|
|
{#if loaded.includes(imageIndex)}
|
|
<img {src} />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
|
|
```jsx
|
|
<Carousel
|
|
let:loaded
|
|
>
|
|
{#each images as src, imageIndex (src)}
|
|
<div class="img-container">
|
|
{#if loaded.includes(imageIndex)}
|
|
<img {src} />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</Carousel>
|
|
```
|
|
|
|
<Divider />
|
|
|
|
## Use case
|
|
<AlbumsPreview />
|
|
|
|
# Installation
|
|
```bash
|
|
yarn add svelte-carousel
|
|
npm install svelte-carousel
|
|
```
|
|
|
|
Import css in App component
|
|
```jsx
|
|
<script>
|
|
import 'svelte-carousel/dist/index.css'
|
|
// ...
|
|
</script>
|
|
```
|
|
|
|
# Props
|
|
| Prop | Type | Default | Description |
|
|
|----------------------|------------|-------------|-----------------------------------------------|
|
|
| arrows | boolean | true | Enable Next/Prev arrows |
|
|
| infinite | boolean | true | Infinite looping |
|
|
| initialPageIndex | number | 0 | Page to start on |
|
|
| speed | number | 500 | Transition speed (ms) |
|
|
| autoplay | boolean | false | Enables auto play of pages |
|
|
| autoplaySpeed | number | 3000 | Auto play change interval |
|
|
| autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) |
|
|
| dots | boolean | true | Current page indicator dots |
|
|
|
|
# Slots
|
|
|
|
## `prev` and `next`
|
|
They are used for customizing prev and next buttons.
|
|
|
|
Slot props:
|
|
|
|
| Prop | Type | Description |
|
|
|--------------------|-------------|---------------------------------------|
|
|
| `showPrevPage` | `function` | Call it to switch to the previos page |
|
|
| `showNextPage` | `function` | Call it to switch to the next page |
|
|
|
|
```jsx
|
|
<Carousel
|
|
let:showPrevPage
|
|
let:showNextPage
|
|
>
|
|
<div slot="prev">
|
|
<!-- -->
|
|
</div>
|
|
<div slot="next">
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
## `dots`
|
|
|
|
This slot is used for customizing dots appearance.
|
|
|
|
Slot props:
|
|
|
|
| Prop | Type | Description |
|
|
|---------------------|---------- --|---------------------------------------------|
|
|
| `currentPageIndex` | `number` | Represents current page index (start from 0) |
|
|
| `pagesCount` | `number` | Total pages amount |
|
|
| `showPage` | `function` | Takes index as page to be shown |
|
|
|
|
```jsx
|
|
<Carousel
|
|
let:currentPageIndex
|
|
let:pagesCount
|
|
let:showPage
|
|
>
|
|
<div slot="dots">
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
## Default slot
|
|
|
|
This slot takes content for the carousel.
|
|
|
|
Slot props:
|
|
|
|
| Prop | Type | Description |
|
|
|-------------------|------------|----------------------------------------------------------------------|
|
|
| `loaded` | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
|
|
|
|
```jsx
|
|
<Carousel
|
|
let:loaded
|
|
>
|
|
<div>
|
|
<!-- -->
|
|
</div>
|
|
<!-- -->
|
|
</Carousel>
|
|
```
|
|
|
|
<Divider />
|
|
|
|
<style>
|
|
.img-container {
|
|
display: block;
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
.img-container > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
/* table */
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
tr {
|
|
border-bottom: 2px solid #009800;
|
|
}
|
|
td {
|
|
padding: 2px 10px;
|
|
}
|
|
</style> |