- Notifications
You must be signed in to change notification settings - Fork66
The awesome carousel component for Svelte 3 ⬅️ 🎨 ➡️
License
NotificationsYou must be signed in to change notification settings
vadimkorr/svelte-carousel
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The awesome carousel component for Svelte 3
yarn add svelte-carousel
npm install svelte-carousel
Import component
<script> import Carousel from 'svelte-carousel' // ...</script>
There are several things to keep in mind whensvelte-carousel is used with SvelteKit. This is becausesvelte-carousel is a client-side library and depends ondocument andwindow.See more in SvelteKit FAQ.
- Install
svelte-carouselas a dev dependency.Why as a dev dependency?
yarn add svelte-carousel -D
npm install svelte-carousel -D
- Extend
kitinsvelte.config.jsto include theviteproperty
constconfig={// existing propskit:{// existing propsvite:{optimizeDeps:{include:['lodash.get','lodash.isequal','lodash.clonedeep']}// plugins: []}}}
- Import and use it:
<script> import Carousel from 'svelte-carousel'; import{browser} from '$app/environment'; let carousel; // for calling methods of the carousel instance const handleNextClick = () =>{carousel.goToNext()}</script>{#ifbrowser}<Carouselbind:this={carousel}><div>1</div><div>2</div><div>3</div></Carousel>{/if}<buttonon:click={handleNextClick}>Next</button>
- Extend
optimizeDeps.includeinvite.config.js
exportdefaultdefineConfig({optimizeDeps:{include:['lodash.get','lodash.isequal','lodash.clonedeep']}})
- Import and use it:
<script> import Carousel from 'svelte-carousel' let carousel; // for calling methods of the carousel instance const handleNextClick = () =>{carousel.goToNext()}</script><Carouselbind:this={carousel}><div>1</div><div>2</div><div>3</div></Carousel><buttonon:click={handleNextClick}>Next</button>
| Prop | Type | Default | Description |
|---|---|---|---|
arrows | boolean | true | Enables 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 autoplay of pages |
autoplayDuration | number | 3000 | Autoplay change interval (ms) |
autoplayDirection | string | 'next' | Autoplay change direction (next orprev) |
pauseOnFocus | boolean | false | Pauses autoplay on focus (for touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay) |
autoplayProgressVisible | boolean | false | Shows autoplay duration progress indicator |
dots | boolean | true | Current page indicator dots |
timingFunction | string | 'ease-in-out' | CSS animation timing function |
swiping | boolean | true | Enables swiping |
particlesToShow | number | 1 | Number of elements to show |
particlesToScroll | number | 1 | Number of elements to scroll |
It is dispatched on page change
| Payload field | Type | Description |
|---|---|---|
event.detail | number | Current page index |
<Carouselon:pageChange={event=>console.log(`Current page index:${event.detail}`)}> <!-- --></Carousel>
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 |
<Carousellet:showPrevPagelet:showNextPage><divslot="prev"> <!-- --></div><divslot="next"> <!-- --></div> <!-- --></Carousel>
This slot is used for customizing how dots look like.
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 |
<Carousellet:currentPageIndexlet:pagesCountlet:showPage><divslot="dots"> <!-- --></div> <!-- --></Carousel>
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 |
currentPageIndex | number | Represents current page index (start from 0) |
<Carousellet:loaded><div> <!-- --></div> <!-- --></Carousel>
Navigates to a page by index.(pageIndex, options) => Promise<void>.
Arguments:
| Argument | Type | Default | Description |
|---|---|---|---|
pageIndex | number | Page number | |
options.animated | boolean | true | Should it be animated or not |
<script> // ... let carousel; function goToStartPage(){carousel.goTo(0,{animated:false})}</script><Carouselbind:this={carousel}> <!-- --></Carousel><buttonclass="button"on:click={goToStartPage}>Go</button>
Navigates to the previous page.(options) => Promise<void>.
Arguments:
| Argument | Type | Default | Description |
|---|---|---|---|
options.animated | boolean | true | Should it be animated or not |
<script> // ... let carousel; function goToPrevPage(){carousel.goToPrev({animated:false})}</script><Carouselbind:this={carousel}> <!-- --></Carousel><buttonclass="button"on:click={goToPrevPage}>Go</button>
Navigates to the next page.(options) => Promise<void>.
Arguments:
| Argument | Type | Default | Description |
|---|---|---|---|
options.animated | boolean | true | Should it be animated or not |
<script> // ... let carousel; function goToNextPage(){carousel.goToNext({animated:false})}</script><Carouselbind:this={carousel}> <!-- --></Carousel><buttonclass="button"on:click={goToNextPage}>Go</button>
About
The awesome carousel component for Svelte 3 ⬅️ 🎨 ➡️
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Contributors10
Uh oh!
There was an error while loading.Please reload this page.