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

Update docs

Browse Source
This commit is contained in:
Vadim
2021-01-27 01:03:46 +03:00
parent 29e63d1795
commit f9ef97c8b6
5 changed files with 254 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/docs/Carousel.svx
View File

@@ -3,6 +3,7 @@
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' },
@@ -15,8 +16,18 @@
{ 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)}
@@ -32,6 +43,8 @@
</Carousel>
```
<Divider />
## Multiple items
<Carousel>
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
@@ -55,6 +68,185 @@
</Carousel>
```
## Albums preview or Marketplace item pictures
<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>

2
src/docs/Color.svelte
View File

@@ -11,7 +11,7 @@
<style>
.color-container {
height: 100px;
height: 150px;
width: 100%;
display: flex;
align-items: center;

11
src/docs/Divider.svelte Normal file
View File

@@ -0,0 +1,11 @@
<div class="divider">
</div>
<style>
.divider {
margin-top: 30px;
margin-bottom: 30px;
height: 1px;
}
</style>

57
src/docs/Layouts/Main.svelte
View File

@@ -1,9 +1,25 @@
<script>
const links = [{
title: 'github',
url: 'https://github.com/vadimkorr/svelte-carousel'
}, {
title: 'npm',
url: 'https://www.npmjs.com/package/svelte-carousel'
}]
</script>
<div class="docs__main-layout__main-container">
<div class="docs__main-layout__content-container">
<div class="docs__main-layout__content-inner-container">
<slot></slot>
<div class="docs__main-layout__header-container">
<img class="docs__main-layout__logo" src="./svelte-carousel-logo-md.png" alt="svelte-carousel-logo" />
<div class="docs__main-layout__links-container">
{#each links as { url, title } (title)}
<a href={url} target="_blank" rel="noopener noreferrer">{title}</a>
{/each}
</div>
</div>
<div class="docs__main-layout__content-container">
<slot></slot>
</div>
</div>
<style>
@@ -11,27 +27,52 @@
background-color: #eaeaea;
}
.docs__main-layout__content-container {
.docs__main-layout__header-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
padding: 10px;
box-sizing: border-box;
background-color: #f0e68c;
}
.docs__main-layout__logo {
height: 80%;
}
.docs__main-layout__links-container {
display: flex;
justify-content: center;
padding: 10px;
}
.docs__main-layout__links-container > a {
text-decoration: none;
color: #009800;
}
.docs__main-layout__links-container > a:not(:last-child) {
margin-right: 10px;
}
.docs__main-layout__content-container {
margin: 0 auto;
}
@media screen and (min-width: 0px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 95%;
}
}
@media screen and (min-width: 768px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 70%;
}
}
@media screen and (min-width: 992px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 60%;
}
}
@media screen and (min-width: 1200px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 50%;
}
}