@haventmet/carousel 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.mcp.json +8 -0
- package/CLAUDE.md +177 -0
- package/LICENSE +21 -0
- package/README.md +76 -0
- package/biome.json +174 -0
- package/package.json +33 -0
- package/packages/alpine/index.html +50 -0
- package/packages/alpine/package.json +70 -0
- package/packages/alpine/src/index.ts +46 -0
- package/packages/alpine/style.css +76 -0
- package/packages/alpine/tsconfig.json +28 -0
- package/packages/alpine/vite.config.ts +28 -0
- package/packages/core/README.md +69 -0
- package/packages/core/package.json +45 -0
- package/packages/core/src/carousel.ts +842 -0
- package/packages/core/src/index.ts +2 -0
- package/packages/core/src/style.css +46 -0
- package/packages/core/vite.config.js +14 -0
- package/packages/react/.vite/deps/_metadata.json +25 -0
- package/packages/react/.vite/deps/chunk-7CQ73C3Q.js +1908 -0
- package/packages/react/.vite/deps/chunk-7CQ73C3Q.js.map +7 -0
- package/packages/react/.vite/deps/package.json +3 -0
- package/packages/react/.vite/deps/react-dom_client.js +21712 -0
- package/packages/react/.vite/deps/react-dom_client.js.map +7 -0
- package/packages/react/.vite/deps/react.js +4 -0
- package/packages/react/.vite/deps/react.js.map +7 -0
- package/packages/react/README.md +75 -0
- package/packages/react/index.html +12 -0
- package/packages/react/package.json +74 -0
- package/packages/react/src/App.tsx +38 -0
- package/packages/react/src/BlossomCarousel.tsx +77 -0
- package/packages/react/src/index.ts +2 -0
- package/packages/react/src/main.jsx +6 -0
- package/packages/react/src/style.css +50 -0
- package/packages/react/tsconfig.json +17 -0
- package/packages/react/vite.config.js +27 -0
- package/packages/svelte/README.md +58 -0
- package/packages/svelte/index.html +12 -0
- package/packages/svelte/package.json +71 -0
- package/packages/svelte/src/App.svelte +12 -0
- package/packages/svelte/src/BlossomCarousel.svelte +39 -0
- package/packages/svelte/src/BlossomCarousel.svelte.d.ts +8 -0
- package/packages/svelte/src/index.ts +2 -0
- package/packages/svelte/src/main.js +10 -0
- package/packages/svelte/src/style.css +52 -0
- package/packages/svelte/tsconfig.json +16 -0
- package/packages/svelte/vite.config.js +45 -0
- package/packages/vue/README.md +70 -0
- package/packages/vue/index.html +12 -0
- package/packages/vue/package.json +69 -0
- package/packages/vue/src/App.vue +82 -0
- package/packages/vue/src/BlossomCarousel.vue +52 -0
- package/packages/vue/src/index.ts +2 -0
- package/packages/vue/src/main.js +5 -0
- package/packages/vue/src/style.css +18 -0
- package/packages/vue/vite.config.js +25 -0
- package/packages/web/README.md +44 -0
- package/packages/web/index.html +29 -0
- package/packages/web/package.json +65 -0
- package/packages/web/src/index.ts +27 -0
- package/packages/web/src/style.css +53 -0
- package/packages/web/style.css +54 -0
- package/packages/web/tsconfig.json +18 -0
- package/packages/web/vite.config.ts +23 -0
- package/pnpm-workspace.yaml +8 -0
- package/public/cover.jpg +0 -0
- package/turbo.json +12 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"moduleResolution": "bundler",
|
|
4
|
+
"allowSyntheticDefaultImports": true,
|
|
5
|
+
"esModuleInterop": true,
|
|
6
|
+
"skipLibCheck": true,
|
|
7
|
+
"resolveJsonModule": true,
|
|
8
|
+
"baseUrl": ".",
|
|
9
|
+
"paths": {
|
|
10
|
+
"@/*": ["src/*"],
|
|
11
|
+
"@numbered/carousel": ["../core/src/index.ts"]
|
|
12
|
+
},
|
|
13
|
+
"types": ["svelte"]
|
|
14
|
+
},
|
|
15
|
+
"include": ["src/**/*"]
|
|
16
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import path from 'node:path'
|
|
2
|
+
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
|
3
|
+
import { defineConfig } from 'vite'
|
|
4
|
+
import dts from 'vite-plugin-dts'
|
|
5
|
+
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [
|
|
8
|
+
svelte({
|
|
9
|
+
compilerOptions: {
|
|
10
|
+
// Ensure proper component compilation for Svelte 5
|
|
11
|
+
generate: 'dom',
|
|
12
|
+
},
|
|
13
|
+
}),
|
|
14
|
+
dts({
|
|
15
|
+
insertTypesEntry: true,
|
|
16
|
+
include: ['src/**/*'],
|
|
17
|
+
exclude: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
|
|
18
|
+
}),
|
|
19
|
+
],
|
|
20
|
+
build: {
|
|
21
|
+
lib: {
|
|
22
|
+
entry: path.resolve(__dirname, 'src/index.ts'),
|
|
23
|
+
name: 'BlossomCarousel',
|
|
24
|
+
fileName: 'blossom-carousel-svelte',
|
|
25
|
+
formats: ['es', 'umd'], // ES modules and UMD for broader compatibility
|
|
26
|
+
},
|
|
27
|
+
rollupOptions: {
|
|
28
|
+
external: [
|
|
29
|
+
'svelte',
|
|
30
|
+
'svelte/internal',
|
|
31
|
+
'svelte/store',
|
|
32
|
+
'@numbered/carousel',
|
|
33
|
+
/^svelte\//, // Match any svelte/* imports
|
|
34
|
+
],
|
|
35
|
+
output: {
|
|
36
|
+
preserveModules: false,
|
|
37
|
+
exports: 'named',
|
|
38
|
+
globals: {
|
|
39
|
+
svelte: 'svelte',
|
|
40
|
+
'@numbered/carousel': 'BlossomCarouselCore',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
})
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Blossom Carousel
|
|
2
|
+
|
|
3
|
+
A native-scroll-first carousel enhanced with drag support for Vue.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
`npm install @numbered/carousel/vue`
|
|
8
|
+
|
|
9
|
+
#### Vue
|
|
10
|
+
|
|
11
|
+
```javascript
|
|
12
|
+
import { BlossomCarousel } from "@numbered/carousel/vue";
|
|
13
|
+
import "@numbered/carousel/core/style.css";
|
|
14
|
+
|
|
15
|
+
const app = createApp({});
|
|
16
|
+
app.component("BlossomCarousel", BlossomCarousel);
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
#### Nuxt
|
|
20
|
+
|
|
21
|
+
Install globally `plugins/blossom-carousel.js`
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
import { BlossomCarousel } from "@numbered/carousel/vue";
|
|
25
|
+
import "@numbered/carousel/core/style.css";
|
|
26
|
+
|
|
27
|
+
export default defineNuxtPlugin((nuxtApp) => {
|
|
28
|
+
nuxtApp.vueApp.component("BlossomCarousel", BlossomCarousel);
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<BlossomCarousel>
|
|
36
|
+
<div v-for="i in 12">Slide {{ i }}</div>
|
|
37
|
+
</BlossomCarousel>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### as
|
|
41
|
+
|
|
42
|
+
Define the HTMLElement of the carousel root.
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<BlossomCarousel as="ul">
|
|
46
|
+
<li v-for="i in 12">Slide {{ i }}</li>
|
|
47
|
+
</BlossomCarousel>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Renders as
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<ul>
|
|
54
|
+
<li>Slide 1</li>
|
|
55
|
+
<li>Slide 2</li>
|
|
56
|
+
<li>Slide 3</li>
|
|
57
|
+
...
|
|
58
|
+
</ul>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Examples
|
|
62
|
+
|
|
63
|
+
- [Simple](https://www.blossom-carousel.com/docs/examples#simple)
|
|
64
|
+
- [Variable widths](https://www.blossom-carousel.com/docs/examples#variable-widths)
|
|
65
|
+
- [CSS Grid](https://www.blossom-carousel.com/docs/examples#css-grid)
|
|
66
|
+
- [Multiple rows](https://www.blossom-carousel.com/docs/examples#multiple-rows)
|
|
67
|
+
- [Snapping](https://www.blossom-carousel.com/docs/examples#snapping)
|
|
68
|
+
- [Grouping](https://www.blossom-carousel.com/docs/examples#grouping)
|
|
69
|
+
- [Sticky](https://www.blossom-carousel.com/docs/examples#sticky)
|
|
70
|
+
- [Coverflow](https://www.blossom-carousel.com/docs/examples#cover-flow)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Blossom Vue</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@haventmet/carousel-vue",
|
|
3
|
+
"version": "0.1.9",
|
|
4
|
+
"author": "Loris",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"description": "A native-scroll-first carousel component for Vue.",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/loris-numbered/carousel"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/loris-numbered/carousel/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://www.blossom-carousel.com",
|
|
15
|
+
"keywords": [
|
|
16
|
+
"blossom",
|
|
17
|
+
"carousel",
|
|
18
|
+
"slider",
|
|
19
|
+
"slideshow",
|
|
20
|
+
"scroll",
|
|
21
|
+
"scroller",
|
|
22
|
+
"drag",
|
|
23
|
+
"dragging",
|
|
24
|
+
"js",
|
|
25
|
+
"vanilla",
|
|
26
|
+
"javascript",
|
|
27
|
+
"typescript",
|
|
28
|
+
"web",
|
|
29
|
+
"html",
|
|
30
|
+
"css",
|
|
31
|
+
"svelte",
|
|
32
|
+
"react",
|
|
33
|
+
"vue"
|
|
34
|
+
],
|
|
35
|
+
"type": "module",
|
|
36
|
+
"files": [
|
|
37
|
+
"dist"
|
|
38
|
+
],
|
|
39
|
+
"main": "dist/blossom-carousel-vue.umd.cjs",
|
|
40
|
+
"module": "dist/blossom-carousel-vue.js",
|
|
41
|
+
"types": "./dist/index.d.ts",
|
|
42
|
+
"exports": {
|
|
43
|
+
".": {
|
|
44
|
+
"types": "./dist/index.d.ts",
|
|
45
|
+
"import": "./dist/blossom-carousel-vue.js",
|
|
46
|
+
"require": "./dist/blossom-carousel-vue.umd.cjs"
|
|
47
|
+
},
|
|
48
|
+
"./style.css": "./dist/blossom-carousel-vue.css"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"dev": "vite",
|
|
55
|
+
"build": "vite build",
|
|
56
|
+
"preview": "vite preview"
|
|
57
|
+
},
|
|
58
|
+
"peerDependencies": {
|
|
59
|
+
"vue": "^3.5.13"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
63
|
+
"vite": "^6.3.5",
|
|
64
|
+
"vite-plugin-dts": "^4.5.4"
|
|
65
|
+
},
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"@haventmet/carousel": "workspace:*"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
import BlossomCarousel from "./BlossomCarousel.vue";
|
|
4
|
+
import "@numbered/carousel/style.css";
|
|
5
|
+
|
|
6
|
+
const carousel = ref(null);
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<div class="page">
|
|
11
|
+
<h1>Blossom Vue</h1>
|
|
12
|
+
<div class="buttons">
|
|
13
|
+
<button @click="carousel?.prev()">Prev</button>
|
|
14
|
+
<button @click="carousel?.next()">Next</button>
|
|
15
|
+
</div>
|
|
16
|
+
<BlossomCarousel ref="carousel" class="carousel">
|
|
17
|
+
<ul class="track">
|
|
18
|
+
<li v-for="i in 12" :key="`slide${i}`" class="slide">
|
|
19
|
+
{{ i }}
|
|
20
|
+
</li>
|
|
21
|
+
</ul>
|
|
22
|
+
</BlossomCarousel>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<style scoped>
|
|
27
|
+
.page {
|
|
28
|
+
height: 100vh;
|
|
29
|
+
width: 100%;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.carousel {
|
|
37
|
+
padding-inline: 1rem;
|
|
38
|
+
scroll-padding-inline: 1rem;
|
|
39
|
+
scroll-snap-type: x mandatory;
|
|
40
|
+
scroll-snap-stop: always;
|
|
41
|
+
|
|
42
|
+
padding-block: 4rem;
|
|
43
|
+
margin-block: -4rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.track {
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-auto-flow: column;
|
|
49
|
+
grid-auto-columns: 300px;
|
|
50
|
+
grid-gap: 1rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.slide {
|
|
54
|
+
width: 100%;
|
|
55
|
+
aspect-ratio: 3/4;
|
|
56
|
+
border-radius: 1rem;
|
|
57
|
+
background-color: #404040;
|
|
58
|
+
display: inline-flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
scroll-snap-align: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.buttons {
|
|
65
|
+
display: flex;
|
|
66
|
+
gap: 1rem;
|
|
67
|
+
margin-bottom: 1rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
button {
|
|
71
|
+
padding: 0.5rem 1rem;
|
|
72
|
+
border-radius: 0.5rem;
|
|
73
|
+
border: 1px solid #404040;
|
|
74
|
+
background-color: #303030;
|
|
75
|
+
color: white;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
button:hover {
|
|
80
|
+
background-color: #404040;
|
|
81
|
+
}
|
|
82
|
+
</style>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component :is="as" ref="root" blossom-carousel="true">
|
|
3
|
+
<slot />
|
|
4
|
+
</component>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup>
|
|
8
|
+
import { onMounted, onBeforeUnmount, shallowRef } from "vue";
|
|
9
|
+
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
as: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: "div",
|
|
14
|
+
},
|
|
15
|
+
repeat: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: false,
|
|
18
|
+
},
|
|
19
|
+
load: {
|
|
20
|
+
type: String,
|
|
21
|
+
default: "conditional",
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
const root = shallowRef(null);
|
|
26
|
+
let blossom;
|
|
27
|
+
|
|
28
|
+
defineExpose({
|
|
29
|
+
el: root,
|
|
30
|
+
next: () => blossom?.next(),
|
|
31
|
+
prev: () => blossom?.prev(),
|
|
32
|
+
currentIndex: () => blossom?.currentIndex(),
|
|
33
|
+
});
|
|
34
|
+
onMounted(async () => {
|
|
35
|
+
const hasMouse = window.matchMedia(
|
|
36
|
+
"(hover: hover) and (pointer: fine)"
|
|
37
|
+
).matches;
|
|
38
|
+
|
|
39
|
+
// don't load if the user has no mouse.
|
|
40
|
+
// overwritten by props.load: 'always'
|
|
41
|
+
if (!hasMouse && props.load !== "always") return;
|
|
42
|
+
|
|
43
|
+
const { Blossom } = await import("@numbered/carousel");
|
|
44
|
+
|
|
45
|
+
blossom = Blossom(root.value, { repeat: props.repeat });
|
|
46
|
+
blossom.init();
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
onBeforeUnmount(() => {
|
|
50
|
+
blossom?.destroy();
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
line-height: 1.5;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
background-color: #242424;
|
|
9
|
+
|
|
10
|
+
font-synthesis: none;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import path from 'node:path'
|
|
2
|
+
import vue from '@vitejs/plugin-vue'
|
|
3
|
+
import { defineConfig } from 'vite'
|
|
4
|
+
import dts from 'vite-plugin-dts'
|
|
5
|
+
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [vue(), dts()],
|
|
8
|
+
build: {
|
|
9
|
+
lib: {
|
|
10
|
+
entry: path.resolve(__dirname, 'src/index.ts'),
|
|
11
|
+
name: 'BlossomCarousel',
|
|
12
|
+
fileName: 'blossom-carousel-vue',
|
|
13
|
+
},
|
|
14
|
+
rollupOptions: {
|
|
15
|
+
// Don't bundle Vue, expect the app to provide it
|
|
16
|
+
external: ['vue', '@numbered/carousel'],
|
|
17
|
+
output: {
|
|
18
|
+
globals: {
|
|
19
|
+
vue: 'Vue',
|
|
20
|
+
'@numbered/carousel': 'BlossomCarouselCore',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
})
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Blossom Carousel
|
|
2
|
+
|
|
3
|
+
A native-scroll-first carousel enhanced with drag support for Web.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
`npm install @numbered/carousel/web`
|
|
8
|
+
|
|
9
|
+
```javascript
|
|
10
|
+
import { BlossomCarousel } from "@numbered/carousel/web";
|
|
11
|
+
import "@numbered/carousel/core/style.css";
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
#### CDN
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<script src="https://unpkg.com/@numbered/carousel/web@0.0.11/dist/blossom-carousel-web.umd.cjs"></script>
|
|
18
|
+
<link
|
|
19
|
+
rel="stylesheet"
|
|
20
|
+
href="https://unpkg.com/@numbered/carousel/web@0.0.11/dist/blossom-carousel-web.umd.cjs"
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<blossom-carousel>
|
|
28
|
+
<div>Slide 1</div>
|
|
29
|
+
<div>Slide 2</div>
|
|
30
|
+
<div>Slide 3</div>
|
|
31
|
+
...
|
|
32
|
+
</blossom-carousel>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Examples
|
|
36
|
+
|
|
37
|
+
- [Simple](https://www.blossom-carousel.com/docs/examples#simple)
|
|
38
|
+
- [Variable widths](https://www.blossom-carousel.com/docs/examples#variable-widths)
|
|
39
|
+
- [CSS Grid](https://www.blossom-carousel.com/docs/examples#css-grid)
|
|
40
|
+
- [Multiple rows](https://www.blossom-carousel.com/docs/examples#multiple-rows)
|
|
41
|
+
- [Snapping](https://www.blossom-carousel.com/docs/examples#snapping)
|
|
42
|
+
- [Grouping](https://www.blossom-carousel.com/docs/examples#grouping)
|
|
43
|
+
- [Sticky](https://www.blossom-carousel.com/docs/examples#sticky)
|
|
44
|
+
- [Coverflow](https://www.blossom-carousel.com/docs/examples#cover-flow)
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Blossom Carousel Web Component</title>
|
|
7
|
+
<link rel="stylesheet" href="./style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="page">
|
|
11
|
+
<h1>Blossom in Web Component</h1>
|
|
12
|
+
<blossom-carousel class="carousel">
|
|
13
|
+
<div class="slide">1</div>
|
|
14
|
+
<div class="slide">2</div>
|
|
15
|
+
<div class="slide">3</div>
|
|
16
|
+
<div class="slide">4</div>
|
|
17
|
+
<div class="slide">5</div>
|
|
18
|
+
<div class="slide">6</div>
|
|
19
|
+
<div class="slide">7</div>
|
|
20
|
+
<div class="slide">8</div>
|
|
21
|
+
<div class="slide">9</div>
|
|
22
|
+
<div class="slide">10</div>
|
|
23
|
+
<div class="slide">11</div>
|
|
24
|
+
<div class="slide">12</div>
|
|
25
|
+
</blossom-carousel>
|
|
26
|
+
</div>
|
|
27
|
+
<script type="module" src="src/index.ts"></script>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@haventmet/carousel-web",
|
|
3
|
+
"version": "0.1.8",
|
|
4
|
+
"author": "Loris",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"description": "A native-scroll-first carousel component for the web.",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/loris-numbered/carousel"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/loris-numbered/carousel/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://www.blossom-carousel.com",
|
|
15
|
+
"keywords": [
|
|
16
|
+
"blossom",
|
|
17
|
+
"carousel",
|
|
18
|
+
"slider",
|
|
19
|
+
"slideshow",
|
|
20
|
+
"scroll",
|
|
21
|
+
"scroller",
|
|
22
|
+
"drag",
|
|
23
|
+
"dragging",
|
|
24
|
+
"js",
|
|
25
|
+
"vanilla",
|
|
26
|
+
"javascript",
|
|
27
|
+
"typescript",
|
|
28
|
+
"web",
|
|
29
|
+
"html",
|
|
30
|
+
"css",
|
|
31
|
+
"svelte",
|
|
32
|
+
"react",
|
|
33
|
+
"vue"
|
|
34
|
+
],
|
|
35
|
+
"type": "module",
|
|
36
|
+
"files": [
|
|
37
|
+
"dist"
|
|
38
|
+
],
|
|
39
|
+
"main": "dist/blossom-carousel-web.umd.cjs",
|
|
40
|
+
"module": "dist/blossom-carousel-web.js",
|
|
41
|
+
"types": "dist/index.d.ts",
|
|
42
|
+
"exports": {
|
|
43
|
+
".": {
|
|
44
|
+
"types": "./dist/index.d.ts",
|
|
45
|
+
"import": "./dist/blossom-carousel-web.js",
|
|
46
|
+
"require": "./dist/blossom-carousel-web.umd.cjs"
|
|
47
|
+
},
|
|
48
|
+
"./style.css": "./dist/blossom-carousel-web.css"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"dev": "vite",
|
|
55
|
+
"build": "vite build",
|
|
56
|
+
"preview": "vite preview"
|
|
57
|
+
},
|
|
58
|
+
"devDependencies": {
|
|
59
|
+
"typescript": "^5.0.0",
|
|
60
|
+
"vite": "^4.0.0"
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"@haventmet/carousel": "workspace:*"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Blossom } from '@numbered/carousel'
|
|
2
|
+
import './style.css'
|
|
3
|
+
|
|
4
|
+
export class BlossomCarousel extends HTMLElement {
|
|
5
|
+
private carouselInstance!: ReturnType<typeof Blossom>
|
|
6
|
+
|
|
7
|
+
constructor() {
|
|
8
|
+
super()
|
|
9
|
+
const shadow = this.attachShadow({ mode: 'open' })
|
|
10
|
+
this.setAttribute('blossom-carousel', 'true')
|
|
11
|
+
const slot = document.createElement('slot')
|
|
12
|
+
shadow.appendChild(slot)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
connectedCallback(): void {
|
|
16
|
+
this.carouselInstance = Blossom(this, {
|
|
17
|
+
repeat: false, // this.hasAttribute("repeat"),
|
|
18
|
+
})
|
|
19
|
+
this.carouselInstance.init()
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
disconnectedCallback(): void {
|
|
23
|
+
this.carouselInstance.destroy()
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
customElements.define('blossom-carousel', BlossomCarousel)
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
white-space: nowrap;
|
|
4
|
+
overflow-x: auto;
|
|
5
|
+
overflow-y: clip;
|
|
6
|
+
scroll-behavior: smooth;
|
|
7
|
+
overscroll-behavior-x: contain;
|
|
8
|
+
list-style-type: none;
|
|
9
|
+
inline-size: 100%;
|
|
10
|
+
max-inline-size: 100vw;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
|
|
13
|
+
/* hide scrollbar */
|
|
14
|
+
scrollbar-width: none;
|
|
15
|
+
&::-webkit-scrollbar {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* &[has-repeat="true"] {
|
|
20
|
+
scroll-padding: 0 50% !important;
|
|
21
|
+
padding: 0 50% !important;
|
|
22
|
+
} */
|
|
23
|
+
|
|
24
|
+
&[has-snap="true"] {
|
|
25
|
+
scroll-snap-type: var(--snap-type) !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&[has-overflow="true"] {
|
|
29
|
+
cursor: grab;
|
|
30
|
+
|
|
31
|
+
&:active {
|
|
32
|
+
cursor: grabbing;
|
|
33
|
+
|
|
34
|
+
/* disable snapping when dragging */
|
|
35
|
+
@media (pointer: fine) {
|
|
36
|
+
scroll-snap-type: none !important;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& > * {
|
|
42
|
+
display: inline-block;
|
|
43
|
+
white-space: initial;
|
|
44
|
+
vertical-align: top;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* prevent drag interaction on children */
|
|
48
|
+
& * {
|
|
49
|
+
-webkit-user-drag: none;
|
|
50
|
+
-webkit-touch-callout: none;
|
|
51
|
+
user-select: none;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@import "@numbered/carousel/core/style.css";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
5
|
+
line-height: 1.5;
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
|
|
8
|
+
color-scheme: light dark;
|
|
9
|
+
color: rgba(255, 255, 255, 0.87);
|
|
10
|
+
background-color: #242424;
|
|
11
|
+
|
|
12
|
+
font-synthesis: none;
|
|
13
|
+
text-rendering: optimizeLegibility;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
margin: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.page {
|
|
23
|
+
height: 100vh;
|
|
24
|
+
width: 100%;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.carousel {
|
|
32
|
+
display: grid;
|
|
33
|
+
grid-auto-flow: column;
|
|
34
|
+
grid-auto-columns: 300px;
|
|
35
|
+
gap: 1rem;
|
|
36
|
+
padding-inline: 1rem;
|
|
37
|
+
scroll-padding-inline: 1rem;
|
|
38
|
+
scroll-snap-type: x mandatory;
|
|
39
|
+
scroll-snap-stop: always;
|
|
40
|
+
|
|
41
|
+
padding-block: 4rem;
|
|
42
|
+
margin-block: -4rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.slide {
|
|
46
|
+
width: 100%;
|
|
47
|
+
aspect-ratio: 3/4;
|
|
48
|
+
border-radius: 1rem;
|
|
49
|
+
background-color: #404040;
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
scroll-snap-align: center;
|
|
54
|
+
}
|