Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrate to svelte 5 #3

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

migrate to svelte 5 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
76e30c7
fix autoplay on apple's devices
Oct 23, 2024
f2c6db6
make autoplay slower in examples
Oct 23, 2024
471e28d
migrate to svelte 5
Oct 23, 2024
73606b8
fix readme
bugproof Oct 23, 2024
6f32557
remove console.log
bugproof Oct 23, 2024
574cc38
bump version
bugproof Oct 23, 2024
ee37adc
use generics attribute instead of $$Generic
Oct 23, 2024
630d7ea
fix readme
Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ A lightweight carousel component for Svelte focused on low runtime and minimalis
npm i svelte-light-carousel
pnpm add svelte-light-carousel
yarn add svelte-light-carousel
bun add svelte-light-carousel
```

## Usage
Expand All @@ -17,7 +18,9 @@ yarn add svelte-light-carousel
</script>

<Carousel {slides}>
<div slot="slide" let:slide>{slide.title}</div>
{#snippet slide({ slide })}
{slide.title}
{/snippet}
</Carousel>
```

Expand All @@ -28,7 +31,7 @@ yarn add svelte-light-carousel
- Rely on CSS for layout => no shifting
- Enough features to cover most basic (e-commerce) use cases
- 100% headless and customizable
- Slots for arrows, pagination, progress bar, and dots, so you can build your own UI
- Snippets for arrows, pagination, progress bar, and dots, so you can build your own UI
- Rely on CSS native scroll behavior on mobile and mouse wheel on desktop
- Accessible WAI-ARIA compliant + good semantic structure
- Preserve trackpad and mouse wheel's native behavior
Expand Down Expand Up @@ -66,7 +69,7 @@ yarn add svelte-light-carousel
| slideClass | string | "" | The class of the carousel slide. |
<!-- END:PROPS -->

## Slots
## Snippets

<!-- START:SLOTS -->
### slide
Expand Down
51 changes: 26 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "svelte-light-carousel",
"version": "1.0.2",
"version": "2.0.0",
"description": "A lightweight carousel component for Svelte",
"license": "MIT",
"repository": "https://github.com/beynar/svelte-light-carousel",
Expand Down Expand Up @@ -45,34 +45,35 @@
"!dist/**/*.spec.*"
],
"peerDependencies": {
"svelte": "^4.0.0"
"svelte": "^5.0.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"@sveltejs/package": "^2.0.0",
"@tailwindcss/typography": "^0.5.9",
"@types/prismjs": "^1.26.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"daisyui": "^3.5.1",
"esbuild": "^0.18.17",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"@sveltejs/adapter-auto": "^3.3.0",
"@sveltejs/kit": "^2.7.2",
"@sveltejs/package": "^2.3.6",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/typography": "^0.5.15",
"@types/prismjs": "^1.26.5",
"@typescript-eslint/eslint-plugin": "^8.11.0",
"@typescript-eslint/parser": "^8.11.0",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.13",
"esbuild": "^0.24.0",
"eslint": "^9.13.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.46.0",
"node-dir": "^0.1.17",
"postcss": "^8.4.27",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"postcss": "^8.4.47",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.7",
"prism-svelte": "^0.5.0",
"prismjs": "^1.29.0",
"semver": "^7.5.4",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.0",
"vite": "^4.4.2"
"semver": "^7.6.3",
"svelte": "^5.0.5",
"svelte-check": "^4.0.5",
"tailwindcss": "^3.4.14",
"typescript": "^5.6.3",
"vite": "^5.4.10"
},
"type": "module"
}
}
12 changes: 8 additions & 4 deletions src/examples/AutoPlayCarousel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<script context="module">
<script module>
export const code = `
// 5 seconds auto play
<Carousel autoPlay={5} {slides}>
<Slide slot="slide" let:slide {...slide} />
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}
</Carousel>`;
</script>

Expand All @@ -12,6 +14,8 @@
import { slides } from './slides.js';
</script>

<Carousel autoPlay={1} {slides}>
<Slide slot="slide" let:slide {...slide} />
<Carousel autoPlay={5} {slides}>
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}
</Carousel>
10 changes: 7 additions & 3 deletions src/examples/CarouselResponsive.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script context="module">
<script module>
export const code = `
<Carousel
{slides}
Expand All @@ -10,7 +10,9 @@
xl: 4
}}
>
<Slide slot="slide" let:slide {...slide} />
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}
</Carousel>
`;
</script>
Expand All @@ -31,5 +33,7 @@
xl: 4
}}
>
<Slide slot="slide" let:slide {...slide} />
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}
</Carousel>
144 changes: 71 additions & 73 deletions src/examples/CarouselWithArrows.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,72 @@
<script context="module">
<script module>
export const code = `
<Carousel containerClass={'px-10'} {slides}>
<Slide slot="slide" let:slide {...slide} />
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}

{#snippet next({ next, canScrollNext, a11y })}
<button
class={\`btn w-fit absolute right-0 top-0 bottom-0 my-auto \${
!canScrollNext ? 'opacity-50 cursor-not-allowed' : ''
}\`}
onclick={next}
{...a11y}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
{/snippet}
{#snippet prev({ prev, canScrollPrev, a11y })}
<button
onclick={prev}
class={\`btn w-fit absolute left-0 top-0 bottom-0 my-auto \${
!canScrollPrev ? 'opacity-50 !cursor-not-allowed' : ''
}\`}

{...a11y}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
{/snippet}
</Carousel>
`;
</script>

<script lang="ts">
import Carousel from '$lib/Carousel.svelte';
import Slide from './Slide.svelte';
import { slides } from './slides.js';
</script>

<Carousel containerClass={'px-10'} {slides}>
{#snippet slide({ slide })}
<Slide {...slide} />
{/snippet}

{#snippet next({ next, canScrollNext, a11y })}
<button
slot="next"
let:next
let:canScrollNext
class={\`btn w-fit absolute right-0 top-0 bottom-0 my-auto \${
class={`btn w-fit absolute right-0 top-0 bottom-0 my-auto ${
!canScrollNext ? 'opacity-50 cursor-not-allowed' : ''
}\`}
on:click={next}
let:a11y
}`}
onclick={next}
{...a11y}
>
<svg
Expand All @@ -25,15 +80,14 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
{/snippet}
{#snippet prev({ prev, canScrollPrev, a11y })}
<button
slot="prev"
let:prev
let:canScrollPrev
on:click={prev}
class={\`btn w-fit absolute left-0 top-0 bottom-0 my-auto \${
onclick={prev}
class={`btn w-fit absolute left-0 top-0 bottom-0 my-auto ${
!canScrollPrev ? 'opacity-50 !cursor-not-allowed' : ''
}\`}
let:a11y
}`}

{...a11y}
>
<svg
Expand All @@ -47,61 +101,5 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
</Carousel>
`;
</script>

<script lang="ts">
import Carousel from '$lib/Carousel.svelte';
import Slide from './Slide.svelte';
import { slides } from './slides.js';
</script>

<Carousel containerClass={'px-10'} {slides}>
<Slide slot="slide" let:slide {...slide} />

<button
slot="next"
let:next
let:canScrollNext
class={`btn w-fit absolute right-0 top-0 bottom-0 my-auto ${
!canScrollNext ? 'opacity-50 cursor-not-allowed' : ''
}`}
on:click={next}
let:a11y
{...a11y}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
<button
slot="prev"
let:prev
let:canScrollPrev
on:click={prev}
class={`btn w-fit absolute left-0 top-0 bottom-0 my-auto ${
!canScrollPrev ? 'opacity-50 !cursor-not-allowed' : ''
}`}
let:a11y
{...a11y}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
{/snippet}
</Carousel>
Loading