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-03-20 19:08:28 +03:00
parent db649e0074
commit f29aedd479
9 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@@ -33,19 +33,19 @@ Import component and styles in App component
```
## Props
| Prop | Type | Default | Description |
|----------------------|------------|-------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| Prop | Type | Default | Description |
|----------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
# Event
# Events
## `pageChange`
Is dispatched on page change

4
docs/index.css
View File

@@ -128,5 +128,5 @@ pre[class*="language-"] {
.token.inserted {
color: green;
}
.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.sc-carousel__carousel-container.svelte-14k3cum{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-14k3cum{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-14k3cum{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-14k3cum{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.sc-carousel__arrow-container.svelte-14k3cum{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{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.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
}.sc-carousel-arrow__circle.svelte-tycflj{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj:hover{opacity:0.5}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}
.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}.sc-carousel__carousel-container.svelte-1pac7rj{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-1pac7rj{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-1pac7rj{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.sc-carousel__pages-container.svelte-1pac7rj{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-1pac7rj{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{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.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width: 0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width: 768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}:root{--size:2px
}.sc-carousel-arrow__circle.svelte-tycflj{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-tycflj:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-tycflj{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.sc-carousel-arrow__arrow-next.svelte-tycflj{transform:rotate(-45deg);left:calc(var(--size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-tycflj{transform:rotate(135deg);right:calc(var(--size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-tycflj,.sc-carousel-arrow__circle_disabled.svelte-tycflj:hover{opacity:0.5}:root{--dot-size:10px}.sc-carousel-dots__container.svelte-ru127d{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 30px}.sc-carousel-dots__dot-container.svelte-ru127d{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.sc-carousel-dot__container.svelte-18q6rl6{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.sc-carousel-dot__dot.svelte-18q6rl6{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-dot__dot.svelte-18q6rl6:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-18q6rl6{opacity:0.7}

4
docs/index.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "svelte-carousel",
"version": "1.0.2",
"version": "1.0.3",
"description": "Svelte carousel",
"main": "dist/index.js",
"author": "vadimkorr",

5
src/components/Carousel/Carousel.svelte
View File

@@ -18,7 +18,10 @@
[PREV]: showPrevPage
}
export let timingFunction = "ease-in-out";
/**
* CSS animation timing function
*/
export let timingFunction = 'ease-in-out';
/**
* Enable Next/Prev arrows

6
src/components/Carousel/CarouselView.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -72,6 +77,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
on:pageChange={
event => console.log(`Current page index: ${event.detail}`)
}

6
src/components/Carousel/CarouselViewCustomArrows.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -66,6 +71,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
let:showPrevPage
let:showNextPage
>

6
src/components/Carousel/CarouselViewCustomDots.svelte
View File

@@ -2,6 +2,11 @@
import Carousel from './Carousel.svelte'
import { NEXT } from '../../direction'
/**
* CSS animation timing function
*/
export let timingFunction = "ease-in-out";
/**
* Enable Next/Previos arrows
*/
@@ -70,6 +75,7 @@
{autoplayDuration}
{autoplayDirection}
{dots}
{timingFunction}
let:currentPageIndex
let:pagesCount
let:showPage

23
src/docs/Carousel.svx
View File

@@ -76,7 +76,7 @@
<Divider />
## Lazy loading
## Lazy loading of images
<Carousel
let:loaded
>
@@ -204,16 +204,17 @@ Import component and styles in App component
# Props
<div class="table-wrapper">
| Prop | Type | Default | Description |
|----------------------|------------|-------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| Prop | Type | Default | Description |
|----------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplayDuration` | `number` | `3000` | Auto play change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Auto play change direction (`next` or `prev`) |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
</div>