
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
svelte-carousel
Advanced tools
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 when svelte-carousel
is used with SvelteKit. This is because svelte-carousel
is a client-side library and depends on document
and window
. See more in SvelteKit FAQ.
svelte-carousel
as a dev dependency. Why as a dev dependency?yarn add svelte-carousel -D
npm install svelte-carousel -D
kit
in svelte.config.js
to include the vite
propertyconst config = {
// existing props
kit: {
// existing props
vite: {
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
// plugins: []
}
}
}
<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>
{#if browser}
<Carousel
bind:this={carousel}
>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>
{/if}
<button on:click={handleNextClick}>Next</button>
optimizeDeps.include
in vite.config.js
export default defineConfig({
optimizeDeps: {
include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
}
})
<script>
import Carousel from 'svelte-carousel'
let carousel; // for calling methods of the carousel instance
const handleNextClick = () => {
carousel.goToNext()
}
</script>
<Carousel
bind:this={carousel}
>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>
<button on: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 or prev ) |
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 |
pageChange
It is dispatched on page change
Payload field | Type | Description |
---|---|---|
event.detail | number | Current page index |
<Carousel
on:pageChange={
event => console.log(`Current page index: ${event.detail}`)
}
>
<!-- -->
</Carousel>
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 |
<Carousel
let:showPrevPage
let:showNextPage
>
<div slot="prev">
<!-- -->
</div>
<div slot="next">
<!-- -->
</div>
<!-- -->
</Carousel>
dots
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 |
<Carousel
let:currentPageIndex
let:pagesCount
let:showPage
>
<div slot="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) |
<Carousel
let:loaded
>
<div>
<!-- -->
</div>
<!-- -->
</Carousel>
goTo
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>
<Carousel
bind:this={carousel}
>
<!-- -->
</Carousel>
<button class="button" on:click={goToStartPage}>Go</button>
goToPrev
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>
<Carousel
bind:this={carousel}
>
<!-- -->
</Carousel>
<button class="button" on:click={goToPrevPage}>Go</button>
goToNext
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>
<Carousel
bind:this={carousel}
>
<!-- -->
</Carousel>
<button class="button" on:click={goToNextPage}>Go</button>
FAQs
Svelte carousel
The npm package svelte-carousel receives a total of 5,673 weekly downloads. As such, svelte-carousel popularity was classified as popular.
We found that svelte-carousel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.