From 0cf986a505b736ebe501d7143b0bf6e2c6f866a8 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Mon, 13 Nov 2023 14:52:01 +0100 Subject: [PATCH] Implement #114. --- CONTRIBUTING.md | 5 +- README.md | 4 +- package.json | 1 + packages/embla-carousel-auto-height/README.md | 4 +- .../embla-carousel-auto-scroll/.eslintignore | 5 + .../embla-carousel-auto-scroll/.eslintrc.js | 28 ++ .../embla-carousel-auto-scroll/.prettierrc.js | 1 + packages/embla-carousel-auto-scroll/README.md | 188 +++++++++++++ .../embla-carousel-auto-scroll/jest.config.js | 8 + .../embla-carousel-auto-scroll/package.json | 77 ++++++ .../rollup.config.js | 53 ++++ .../src/components/AutoScroll.ts | 259 ++++++++++++++++++ .../src/components/Options.ts | 25 ++ .../embla-carousel-auto-scroll/src/index.ts | 2 + .../embla-carousel-auto-scroll/tsconfig.json | 15 + packages/embla-carousel-autoplay/README.md | 4 +- .../src/components/Autoplay.ts | 45 +-- packages/embla-carousel-class-names/README.md | 4 +- packages/embla-carousel-docs/README.md | 4 +- .../src/components/Mdx/Styles/code.ts | 6 + .../embla-carousel-docs/src/consts/tabs.ts | 4 + .../src/content/pages/api/events.mdx | 4 +- .../src/content/pages/api/methods.mdx | 4 +- .../src/content/pages/api/options.mdx | 4 +- .../src/content/pages/api/plugins.mdx | 37 ++- .../src/content/pages/plugins/auto-height.mdx | 53 ++-- .../src/content/pages/plugins/auto-scroll.mdx | 190 +++++++++++++ .../src/content/pages/plugins/autoplay.mdx | 62 ++--- .../src/content/pages/plugins/class-names.mdx | 41 +-- .../content/pages/plugins/wheel-gestures.mdx | 34 +-- packages/embla-carousel-react/README.md | 4 +- .../embla-carousel-reactive-utils/README.md | 4 +- packages/embla-carousel-solid/README.md | 4 +- packages/embla-carousel-svelte/README.md | 4 +- packages/embla-carousel-vue/README.md | 4 +- packages/embla-carousel/README.md | 4 +- yarn.lock | 21 ++ 37 files changed, 1039 insertions(+), 177 deletions(-) create mode 100644 packages/embla-carousel-auto-scroll/.eslintignore create mode 100644 packages/embla-carousel-auto-scroll/.eslintrc.js create mode 100644 packages/embla-carousel-auto-scroll/.prettierrc.js create mode 100644 packages/embla-carousel-auto-scroll/README.md create mode 100644 packages/embla-carousel-auto-scroll/jest.config.js create mode 100644 packages/embla-carousel-auto-scroll/package.json create mode 100644 packages/embla-carousel-auto-scroll/rollup.config.js create mode 100644 packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts create mode 100644 packages/embla-carousel-auto-scroll/src/components/Options.ts create mode 100644 packages/embla-carousel-auto-scroll/src/index.ts create mode 100644 packages/embla-carousel-auto-scroll/tsconfig.json create mode 100644 packages/embla-carousel-docs/src/content/pages/plugins/auto-scroll.mdx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 64df1c856..9a72e24b7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -31,9 +31,10 @@ These are the actual published packages which can be installed from the npm regi | wrapper | [embla-carousel-vue](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-vue) | | | | wrapper | [embla-carousel-svelte](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-svelte) | | | | plugin | [embla-carousel-autoplay](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-autoplay) | | | +| plugin | [embla-carousel-auto-scroll](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-auto-scroll) | | | | plugin | [embla-carousel-auto-height](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-auto-height) | | | | plugin | [embla-carousel-class-names](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-class-names) | | | -| plugin | [embla-carousel-reactive-utils](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-reactive-utils) | | | +| utility | [embla-carousel-reactive-utils](https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-reactive-utils) | | | #### Playgrounds @@ -85,7 +86,7 @@ The documentation website is generated using [gatsby](https://github.com/gatsbyj To develop the docs locally follow these steps: -- Run `yarn install`in the root directory to install dependencies. +- Run `yarn install` in the root directory to install dependencies. - Run `yarn build` to build the docs (and all other packages). - Run `yarn start` to start the dev environment of the docs at `localhost:8000`. - Make sure the `.mdx` file you're working on has a header formatted like this: diff --git a/README.md b/README.md index a1f151a82..31b3db22c 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/package.json b/package.json index b6bd2f04d..82bb90a03 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "packages/embla-carousel-svelte", "packages/embla-carousel-docs", "packages/embla-carousel-autoplay", + "packages/embla-carousel-auto-scroll", "packages/embla-carousel-auto-height", "packages/embla-carousel-class-names", "packages/embla-carousel-reactive-utils", diff --git a/packages/embla-carousel-auto-height/README.md b/packages/embla-carousel-auto-height/README.md index 71a711f10..f7de5e7a0 100644 --- a/packages/embla-carousel-auto-height/README.md +++ b/packages/embla-carousel-auto-height/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-auto-scroll/.eslintignore b/packages/embla-carousel-auto-scroll/.eslintignore new file mode 100644 index 000000000..f5efc98ab --- /dev/null +++ b/packages/embla-carousel-auto-scroll/.eslintignore @@ -0,0 +1,5 @@ +docs +package.json +package-lock.json +yarn.lock +node_modules diff --git a/packages/embla-carousel-auto-scroll/.eslintrc.js b/packages/embla-carousel-auto-scroll/.eslintrc.js new file mode 100644 index 000000000..b17ac0422 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/.eslintrc.js @@ -0,0 +1,28 @@ +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module' + }, + extends: [ + 'eslint:recommended', + 'plugin:prettier/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended' + ], + rules: { + 'no-debugger': 2, + 'no-console': 2, + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/ban-types': [ + 'error', + { + types: { + '{}': false + }, + extendDefaults: true + } + ] + } +} diff --git a/packages/embla-carousel-auto-scroll/.prettierrc.js b/packages/embla-carousel-auto-scroll/.prettierrc.js new file mode 100644 index 000000000..5100fc98a --- /dev/null +++ b/packages/embla-carousel-auto-scroll/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('../../.prettierrc.js') diff --git a/packages/embla-carousel-auto-scroll/README.md b/packages/embla-carousel-auto-scroll/README.md new file mode 100644 index 000000000..5e5257d77 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/README.md @@ -0,0 +1,188 @@ +
+
+

+ Embla Carousel + +

+ +

+ + + + + + +

+ + +

Embla Carousel Auto Scroll

+ + +

+ Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source. +

+ +
+ +

+ +  Examples  + +

+ +

+ +  Generator  + +

+ +

+ +  Installation  + +

+
+ +
+ +
+ +

Ready for

+ + +

+ + + +   + + + +   + + + +   + + + +   + + + +   + + + +

+
+ +
+ +
+ +

Contributors

+ +

+ Thank you to all contributors for making Embla Carousel awesome! Contributions are welcome. +

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +
+ +
+ +

Special Thanks

+ +

+ Special thanks to gunnarx2 for creating the React wrapper useEmblaCarousel, to xiel for creating the Embla Carousel Wheel Gestures plugin, to LiamMartens for creating the Solid wrapper createEmblaCarousel, and to zaaakher for your continuous and awesome contributions. +

+

+ + + + +

+
+ +
+ +

Open Source

+ +

+ Copyright © 2019-present, David Jerleke.
+ Embla is MIT licensed 💖. +

+ +

+ · · · +

+ +

+ Thanks BrowserStack. +

+ +

+ + + +

diff --git a/packages/embla-carousel-auto-scroll/jest.config.js b/packages/embla-carousel-auto-scroll/jest.config.js new file mode 100644 index 000000000..04a0181f9 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/jest.config.js @@ -0,0 +1,8 @@ +module.exports = { + transform: { + '^.+\\.(t|j)sx?$': 'ts-jest' + }, + testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], + testEnvironment: 'jsdom' +} diff --git a/packages/embla-carousel-auto-scroll/package.json b/packages/embla-carousel-auto-scroll/package.json new file mode 100644 index 000000000..d6f26aca9 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/package.json @@ -0,0 +1,77 @@ +{ + "name": "embla-carousel-auto-scroll", + "version": "8.0.0-rc20", + "author": "David Jerleke", + "description": "An auto scroll plugin for Embla Carousel", + "repository": { + "type": "git", + "url": "git+https://github.com/davidjerleke/embla-carousel" + }, + "bugs": { + "url": "https://github.com/davidjerleke/embla-carousel/issues" + }, + "homepage": "https://www.embla-carousel.com", + "license": "MIT", + "keywords": [ + "slider", + "carousel", + "slideshow", + "gallery", + "lightweight", + "touch", + "javascript", + "typescript", + "react", + "vue", + "svelte", + "solid" + ], + "main": "embla-carousel-auto-scroll.umd.js", + "unpkg": "embla-carousel-auto-scroll.umd.js", + "module": "./esm/embla-carousel-auto-scroll.esm.js", + "types": "index.d.ts", + "sideEffects": false, + "files": [ + "embla-carousel-auto-scroll*", + "components/**/*", + "index.d.ts", + "esm/**/*", + "cjs/**/*" + ], + "scripts": { + "test": "echo \"Info: no tests specified\" && exit 0", + "build": "rollup --bundleConfigAsCjs -c", + "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development", + "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\"" + }, + "devDependencies": { + "@types/jest": "^29.5.6", + "@typescript-eslint/eslint-plugin": "^6.9.0", + "@typescript-eslint/parser": "^6.9.0", + "eslint": "^8.52.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-prettier": "^4.0.0", + "jest": "^29.5.0", + "jest-environment-jsdom": "^29.5.0", + "prettier": "2.8.8", + "rollup": "^4.1.5", + "ts-jest": "^29.1.1", + "typescript": "^5.2.2" + }, + "peerDependencies": { + "embla-carousel": "8.0.0-rc20" + }, + "exports": { + "./package.json": "./package.json", + ".": { + "import": { + "types": "./esm/index.d.ts", + "default": "./esm/embla-carousel-auto-scroll.esm.js" + }, + "require": { + "types": "./cjs/index.d.ts", + "default": "./cjs/embla-carousel-auto-scroll.cjs.js" + } + } + } +} diff --git a/packages/embla-carousel-auto-scroll/rollup.config.js b/packages/embla-carousel-auto-scroll/rollup.config.js new file mode 100644 index 000000000..b9fda5710 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/rollup.config.js @@ -0,0 +1,53 @@ +import packageJson from './package.json' +import { + FOLDERS, + CONFIG_BABEL, + CONFIG_TYPESCRIPT, + CONFIG_GLOBALS, + babel, + typescript, + resolve, + terser, + createBuildPath, + kebabToPascalCase, + createNodeNextSupport +} from '../../rollup.config' + +export default [ + { + input: 'src/index.ts', + output: [ + { + file: createBuildPath(packageJson, FOLDERS.CJS), + format: FOLDERS.CJS, + globals: CONFIG_GLOBALS, + strict: true, + sourcemap: true, + exports: 'auto' + }, + { + file: createBuildPath(packageJson, FOLDERS.ESM), + format: FOLDERS.ESM, + globals: CONFIG_GLOBALS, + strict: true, + sourcemap: true + }, + { + file: createBuildPath(packageJson, FOLDERS.UMD), + format: FOLDERS.UMD, + globals: CONFIG_GLOBALS, + strict: true, + sourcemap: false, + name: kebabToPascalCase(packageJson.name), + plugins: [terser()] + } + ], + external: Object.keys(CONFIG_GLOBALS), + plugins: [ + resolve(), + typescript(CONFIG_TYPESCRIPT), + babel(CONFIG_BABEL), + createNodeNextSupport() + ] + } +] diff --git a/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts new file mode 100644 index 000000000..7065dfdee --- /dev/null +++ b/packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts @@ -0,0 +1,259 @@ +import { OptionsType, defaultOptions } from './Options' +import { CreatePluginType } from 'embla-carousel/components/Plugins' +import { OptionsHandlerType } from 'embla-carousel/components/OptionsHandler' +import { EmblaCarouselType } from 'embla-carousel' +import { EngineType } from 'embla-carousel/components/Engine' +import { ScrollBodyType } from 'embla-carousel/components/ScrollBody' + +declare module 'embla-carousel/components/Plugins' { + interface EmblaPluginsType { + autoScroll?: AutoScrollType + } +} + +declare module 'embla-carousel/components/EventHandler' { + interface EmblaEventListType { + autoScrollPlay: 'autoScroll:play' + autoScrollStop: 'autoScroll:stop' + } +} + +export type AutoScrollType = CreatePluginType< + { + play: (delay?: number) => void + stop: () => void + reset: () => void + isPlaying: () => boolean + }, + OptionsType +> + +export type AutoScrollOptionsType = AutoScrollType['options'] + +function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType { + let options: OptionsType + let emblaApi: EmblaCarouselType + let destroyed: boolean + let playing = false + let resume = true + let timer = 0 + let startDelay: number + let defaultScrollBehaviour: ScrollBodyType + + function init( + emblaApiInstance: EmblaCarouselType, + optionsHandler: OptionsHandlerType + ): void { + emblaApi = emblaApiInstance + + const { mergeOptions, optionsAtMedia } = optionsHandler + const optionsBase = mergeOptions(defaultOptions, AutoScroll.globalOptions) + const allOptions = mergeOptions(optionsBase, userOptions) + options = optionsAtMedia(allOptions) + + if (emblaApi.scrollSnapList().length <= 1) return + + startDelay = options.startDelay + destroyed = false + defaultScrollBehaviour = emblaApi.internalEngine().scrollBody + + const { eventStore } = emblaApi.internalEngine() + const emblaRoot = emblaApi.rootNode() + const root = (options.rootNode && options.rootNode(emblaRoot)) || emblaRoot + const container = emblaApi.containerNode() + + emblaApi.on('pointerDown', stopScroll) + + if (!options.stopOnInteraction) { + emblaApi.on('pointerUp', startScrollOnSettle) + } + + if (options.stopOnMouseEnter) { + eventStore.add(root, 'mouseenter', () => { + resume = false + stopScroll() + }) + + if (!options.stopOnInteraction) { + eventStore.add(root, 'mouseleave', () => { + resume = true + startScroll() + }) + } + } + + if (options.stopOnFocusIn) { + eventStore.add(container, 'focusin', () => { + stopScroll() + emblaApi.scrollTo(emblaApi.selectedScrollSnap(), true) + }) + + if (!options.stopOnInteraction) { + eventStore.add(container, 'focusout', startScroll) + } + } + + if (options.playOnInit) { + emblaApi.on('init', startScroll).on('reInit', startScroll) + } + } + + function destroy(): void { + destroyed = true + playing = false + emblaApi + .off('init', startScroll) + .off('reInit', startScroll) + .off('pointerDown', stopScroll) + .off('pointerUp', startScrollOnSettle) + .off('settle', onSettle) + stopScroll() + } + + function startScroll(): void { + if (destroyed || playing) return + if (!resume) return + emblaApi.emit('autoScroll:play') + + const engine = emblaApi.internalEngine() + const { ownerWindow } = engine + + timer = ownerWindow.setTimeout(() => { + engine.scrollBody = createAutoScrollBehaviour(engine) + engine.animation.start() + }, startDelay) + + playing = true + } + + function stopScroll(): void { + if (destroyed || !playing) return + emblaApi.emit('autoScroll:stop') + + const engine = emblaApi.internalEngine() + const { ownerWindow } = engine + + engine.scrollBody = defaultScrollBehaviour + ownerWindow.clearTimeout(timer) + timer = 0 + + playing = false + } + + function onSettle(): void { + if (resume) startScroll() + emblaApi.off('settle', onSettle) + } + + function startScrollOnSettle(): void { + emblaApi.on('settle', onSettle) + } + + function createAutoScrollBehaviour(engine: EngineType): ScrollBodyType { + const { + location, + target, + scrollTarget, + index, + indexPrevious, + limit: { reachedMin, reachedMax, constrain }, + options: { loop } + } = engine + const directionSign = options.direction === 'forward' ? -1 : 1 + const noop = (): ScrollBodyType => self + + let bodyVelocity = 0 + let scrollDirection = 0 + let rawLocation = location.get() + let rawLocationPrevious = 0 + let hasSettled = false + + function seek(): ScrollBodyType { + let directionDiff = 0 + + bodyVelocity = directionSign * options.speed + rawLocation += bodyVelocity + location.add(bodyVelocity) + target.set(location) + + directionDiff = rawLocation - rawLocationPrevious + scrollDirection = Math.sign(directionDiff) + rawLocationPrevious = rawLocation + + const currentIndex = scrollTarget.byDistance(0, false).index + + if (index.get() !== currentIndex) { + indexPrevious.set(index.get()) + index.set(currentIndex) + emblaApi.emit('select') + } + + const reachedEnd = + options.direction === 'forward' + ? reachedMin(location.get()) + : reachedMax(location.get()) + + if (!loop && reachedEnd) { + hasSettled = true + const constrainedLocation = constrain(location.get()) + location.set(constrainedLocation) + target.set(location) + stopScroll() + } + + return self + } + + const self: ScrollBodyType = { + direction: () => scrollDirection, + duration: () => -1, + velocity: () => bodyVelocity, + settled: () => hasSettled, + seek, + useBaseFriction: noop, + useBaseDuration: noop, + useFriction: noop, + useDuration: noop + } + return self + } + + function play(startDelayOverride?: number): void { + if (typeof startDelayOverride !== 'undefined') { + startDelay = startDelayOverride + } + resume = true + startScroll() + } + + function stop(): void { + if (playing) stopScroll() + } + + function reset(): void { + if (playing) { + stopScroll() + startScrollOnSettle() + } + } + + function isPlaying(): boolean { + return playing + } + + const self: AutoScrollType = { + name: 'autoScroll', + options: userOptions, + init, + destroy, + play, + stop, + reset, + isPlaying + } + return self +} + +AutoScroll.globalOptions = undefined + +export default AutoScroll diff --git a/packages/embla-carousel-auto-scroll/src/components/Options.ts b/packages/embla-carousel-auto-scroll/src/components/Options.ts new file mode 100644 index 000000000..eea90537c --- /dev/null +++ b/packages/embla-carousel-auto-scroll/src/components/Options.ts @@ -0,0 +1,25 @@ +import { CreateOptionsType } from 'embla-carousel/components/Options' + +export type OptionsType = CreateOptionsType<{ + direction: 'forward' | 'backward' + speed: number + startDelay: number + playOnInit: boolean + stopOnFocusIn: boolean + stopOnInteraction: boolean + stopOnMouseEnter: boolean + rootNode: ((emblaRoot: HTMLElement) => HTMLElement | null) | null +}> + +export const defaultOptions: OptionsType = { + direction: 'forward', + speed: 2, + startDelay: 1000, + active: true, + breakpoints: {}, + playOnInit: true, + stopOnFocusIn: true, + stopOnInteraction: true, + stopOnMouseEnter: false, + rootNode: null +} diff --git a/packages/embla-carousel-auto-scroll/src/index.ts b/packages/embla-carousel-auto-scroll/src/index.ts new file mode 100644 index 000000000..bb865b917 --- /dev/null +++ b/packages/embla-carousel-auto-scroll/src/index.ts @@ -0,0 +1,2 @@ +export { AutoScrollType, AutoScrollOptionsType } from './components/AutoScroll' +export { default } from './components/AutoScroll' diff --git a/packages/embla-carousel-auto-scroll/tsconfig.json b/packages/embla-carousel-auto-scroll/tsconfig.json new file mode 100644 index 000000000..95539428c --- /dev/null +++ b/packages/embla-carousel-auto-scroll/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2015", + "module": "esnext", + "lib": ["dom", "esnext"], + "esModuleInterop": true, + "strict": true, + "declaration": true, + "declarationDir": "./", + "moduleResolution": "node", + "noEmit": true + }, + "include": ["src/index.ts", "src/components"], + "exclude": ["node_modules", "**/*.test.ts"] +} diff --git a/packages/embla-carousel-autoplay/README.md b/packages/embla-carousel-autoplay/README.md index fc71dc9dc..53d697d4a 100644 --- a/packages/embla-carousel-autoplay/README.md +++ b/packages/embla-carousel-autoplay/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-autoplay/src/components/Autoplay.ts b/packages/embla-carousel-autoplay/src/components/Autoplay.ts index 518244eea..94c504f27 100644 --- a/packages/embla-carousel-autoplay/src/components/Autoplay.ts +++ b/packages/embla-carousel-autoplay/src/components/Autoplay.ts @@ -57,8 +57,9 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { const { eventStore, ownerDocument } = emblaApi.internalEngine() const emblaRoot = emblaApi.rootNode() const root = (options.rootNode && options.rootNode(emblaRoot)) || emblaRoot + const container = emblaApi.containerNode() - emblaApi.on('pointerDown', clearTimer) + emblaApi.on('pointerDown', stopTimer) if (!options.stopOnInteraction) { emblaApi.on('pointerUp', startTimer) @@ -67,7 +68,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { if (options.stopOnMouseEnter) { eventStore.add(root, 'mouseenter', () => { resume = false - clearTimer() + stopTimer() }) if (!options.stopOnInteraction) { @@ -79,21 +80,14 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { } if (options.stopOnFocusIn) { - eventStore.add(root, 'focusin', clearTimer) + eventStore.add(container, 'focusin', stopTimer) if (!options.stopOnInteraction) { - eventStore.add(root, 'focusout', startTimer) + eventStore.add(container, 'focusout', startTimer) } } - eventStore.add(ownerDocument, 'visibilitychange', () => { - if (ownerDocument.visibilityState === 'hidden') { - resume = playing - return clearTimer() - } - - if (resume) startTimer() - }) + eventStore.add(ownerDocument, 'visibilitychange', visibilityChange) if (options.playOnInit) { emblaApi.on('init', startTimer).on('reInit', startTimer) @@ -103,10 +97,12 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { function destroy(): void { destroyed = true playing = false - emblaApi.off('init', startTimer).off('reInit', startTimer) - emblaApi.off('pointerDown', clearTimer) - if (!options.stopOnInteraction) emblaApi.off('pointerUp', startTimer) - clearTimer() + emblaApi + .off('init', startTimer) + .off('reInit', startTimer) + .off('pointerDown', stopTimer) + .off('pointerUp', startTimer) + stopTimer() cancelAnimationFrame(animationFrame) animationFrame = 0 } @@ -121,7 +117,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { playing = true } - function clearTimer(): void { + function stopTimer(): void { if (destroyed) return if (playing) emblaApi.emit('autoplay:stop') const { ownerWindow } = emblaApi.internalEngine() @@ -130,6 +126,17 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { playing = false } + function visibilityChange(): void { + const { ownerDocument } = emblaApi.internalEngine() + + if (ownerDocument.visibilityState === 'hidden') { + resume = playing + return stopTimer() + } + + if (resume) startTimer() + } + function play(jumpOverride?: boolean): void { if (typeof jumpOverride !== 'undefined') jump = jumpOverride resume = true @@ -137,7 +144,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { } function stop(): void { - if (playing) clearTimer() + if (playing) stopTimer() } function reset(): void { @@ -155,7 +162,7 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType { const lastIndex = emblaApi.scrollSnapList().length - 1 const kill = options.stopOnLastSnap && nextIndex === lastIndex - if (kill) clearTimer() + if (kill) stopTimer() if (emblaApi.canScrollNext()) { emblaApi.scrollNext(jump) diff --git a/packages/embla-carousel-class-names/README.md b/packages/embla-carousel-class-names/README.md index 9efa6e629..d77194bed 100644 --- a/packages/embla-carousel-class-names/README.md +++ b/packages/embla-carousel-class-names/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-docs/README.md b/packages/embla-carousel-docs/README.md index 26fc23139..cd2b89487 100644 --- a/packages/embla-carousel-docs/README.md +++ b/packages/embla-carousel-docs/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts b/packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts index 13f9ba77b..8a2f48da6 100644 --- a/packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts +++ b/packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts @@ -32,6 +32,12 @@ export const codeStyles = css` border-color: ${COLORS.DETAIL_MEDIUM_CONTRAST}; } + ${AdmonitionWrapper} .${PRISM_HIGHLIGHT_CLASS_NAME} { + display: inline-grid; + margin: 0; + width: 100%; + } + .${PRISM_HIGHLIGHT_CLASS_NAME} { ${pageFrameCollapseStyles}; position: relative; diff --git a/packages/embla-carousel-docs/src/consts/tabs.ts b/packages/embla-carousel-docs/src/consts/tabs.ts index 604a34e8e..da1c8a384 100644 --- a/packages/embla-carousel-docs/src/consts/tabs.ts +++ b/packages/embla-carousel-docs/src/consts/tabs.ts @@ -42,6 +42,10 @@ export const TABS_SITE_NAVIGATION: TabsGroupType = { export const TABS_PACKAGE_MANAGER: TabsGroupType = { GROUP_ID: 'package-manager', TABS: { + CDN: { + LABEL: 'CDN', + VALUE: 'cdn' + }, NPM: { LABEL: 'npm', VALUE: 'npm' diff --git a/packages/embla-carousel-docs/src/content/pages/api/events.mdx b/packages/embla-carousel-docs/src/content/pages/api/events.mdx index 4388e52a0..e95e1a216 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/events.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/events.mdx @@ -257,8 +257,6 @@ The `EmblaEventType` is obtained directly from the **core package** `embla-carou ---- - ## Reference Below follows an exhaustive **list of all** Embla Carousel **events** together with information about how they work. @@ -350,3 +348,5 @@ Runs when the user has a pointer down on the carousel. It's triggered by a `touc Once: `no` Runs when the user has released the pointer from the carousel. It's triggered by a `touchend` or a `mouseup` event. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx index ecc778a4e..f11b56c39 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx @@ -155,8 +155,6 @@ The `EmblaCarouselType` is obtained directly from the **core package** `embla-ca ---- - ## Reference Below follows an exhaustive **list of all** Embla Carousel **methods** with their respective parameters and return values. @@ -360,3 +358,5 @@ Parameters: `event: EmblaEventType` Returns: `void` Emits an embla [event](/api/events/). This doesn't trigger any internal Embla functionality. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx index e67ac33af..b910b4fd5 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/options.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/options.mdx @@ -178,8 +178,6 @@ The `EmblaOptionsType` is obtained directly from the **core package** `embla-car ---- - ## Reference Below follows an exhaustive **list of all** Embla Carousel **options** and their default values. @@ -423,3 +421,5 @@ Embla automatically watches the [container](/api/methods/#containernode/) for ** run its default mutation behaviour after your callback, or return `false` if you want to disable it. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx index 228a91e2b..bf6bf95e7 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx +++ b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx @@ -8,6 +8,7 @@ date: 2021-11-06 import { Tabs } from 'components/Tabs/Tabs' import { TabsItem } from 'components/Tabs/TabsItem' import { TABS_LIBRARY } from 'consts/tabs' +import { TABS_PACKAGE_MANAGER } from 'consts/tabs' # Plugins @@ -15,9 +16,37 @@ It's possible to **extend** Embla carousel with additional features using **plug --- +## Installation + +All **official plugins** are separate **NPM packages**. They're all **prefixed** with `embla-carousel` followed by its **unique** plugin **name**. For example, the `Autoplay` plugin is installed like so: + + + + + ```html + + ``` + + + + + ```shell + npm install embla-carousel-autoplay --save + ``` + + + + + ```shell + yarn add embla-carousel-autoplay + ``` + + + + ## Usage -The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin has its own [options](/api/plugins/#constructor-options) and [methods](/api/plugins/#calling-methods). +The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin might have its own [options](/api/plugins/#constructor-options), [methods](/api/plugins/#calling-methods) and [events](/api/plugins/#adding-event-listeners). ### Adding a plugin @@ -26,7 +55,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca - ```js highlight={4} + ```js highlight={2,4} import EmblaCarousel from 'embla-carousel' import Autoplay from 'embla-carousel-autoplay' @@ -36,7 +65,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca - ```jsx highlight={5} + ```jsx highlight={2,5} import useEmblaCarousel from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' @@ -49,7 +78,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca - ```html highlight={5} + ```html highlight={3,5} + ``` + + ```shell @@ -40,32 +47,29 @@ First you need to install the **npm package** and save it to your dependencies: -Alternatively, you can use a **CDN** to include it in your project: - -```html - -``` - ## Usage -This plugin accepts a single **optional** parameter, which is its [options](/plugins/auto-height/#options) object that allows you to configure it. +Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**. -```js -import EmblaCarousel from 'embla-carousel' -import AutoHeight from 'embla-carousel-auto-height' - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [AutoHeight()]) // Add plugin -``` + You can make use of CSS transitions to **transition height** changes. But beware: Transitioning height triggers reflow and may cause a performance hit. +
+ ```css .embla__container { transition: height 0.2s; } ``` -If you've been following along with any of the guides in the [Get Started](/get-started/) section, you will probably want to make sure that each **slide height** is **determined** by the **content** it holds. Amend your CSS with the following to achieve this: + + + + +If you've been following along with any of the guides in the [get started](/get-started/) section, you want to make sure that each **slide height** is **determined** by the **content** it holds. Add the following to your CSS to achieve this: + +
```css highlight={3} .embla__container { @@ -74,20 +78,11 @@ If you've been following along with any of the guides in the [Get Started](/get- } ``` -## Options - -The Auto Height plugin accepts an optional **options** object as the first argument. Here's an example of how to make use of it: + -```js -import EmblaCarousel from 'embla-carousel' -import AutoHeight from 'embla-carousel-auto-height' - -const autoHeightOptions = { destroyHeight: 'auto' } // Options +## Options -const embla = EmblaCarousel(emblaRoot, { loop: false }, [ - AutoHeight(autoHeightOptions) // Add plugin with options -]) -``` +Below follows an exhaustive **list of all** `Auto Height` **options** and their default values. --- @@ -97,3 +92,5 @@ Type: `CSSStyleDeclaration.height` Default: `auto` Choose CSS height declaration that will be applied to the carousel container when the plugin is destroyed. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/auto-scroll.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/auto-scroll.mdx new file mode 100644 index 000000000..5be3fe6f2 --- /dev/null +++ b/packages/embla-carousel-docs/src/content/pages/plugins/auto-scroll.mdx @@ -0,0 +1,190 @@ +--- +title: Auto Scroll +description: Learn how to use the Auto Scroll plugin for Embla Carousel +order: 1 +date: 2024-01-13 +--- + +import { Tabs } from 'components/Tabs/Tabs' +import { TabsItem } from 'components/Tabs/TabsItem' +import { TABS_PACKAGE_MANAGER } from 'consts/tabs' + +# Auto Scroll + + + View plugin on GitHub + + +This plugin is used to extend Embla Carousel with **auto scroll** functionality. It comes with a useful set of options that allows you to customize it to your liking. + +## Installation + +Start by installing the **npm package** and save it to your dependencies: + + + + + ```html + + ``` + + + + + ```shell + npm install embla-carousel-auto-scroll --save + ``` + + + + + ```shell + yarn add embla-carousel-auto-scroll + ``` + + + + +## Usage + +Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**. + +## Options + +Below follows an exhaustive **list of all** `Auto Scroll` **options** and their default values. + +### speed + +Type: `number` +Default: `2` + +Number of pixels auto scroll should advance per frame. + +--- + +### startDelay + +Type: `number` +Default: `1000` + +Number of milliseconds auto scroll should **wait before it starts**. This also applies when user interactions end and [stopOnInteraction](/plugins/auto-scroll/#stoponinteraction) is `false`. + +--- + +### direction + +Type: `string` +Default: `forward` + +This option is used to set the auto scroll direction. Set it to `backward` if you want it to scroll in the opposite direction. + +--- + +### playOnInit + +Type: `boolean` +Default: `true` + +If set to `false`, you'll have to start auto scroll yourself by calling the [play](/plugins/auto-scroll/#play) method. + +--- + +### stopOnInteraction + +Type: `boolean` +Default: `true` + +If set to `false`, auto scroll will not be disabled after drag interactions, and it will restart every time after an interaction. + +--- + +### stopOnMouseEnter + +Type: `boolean` +Default: `false` + +When enabled, auto scroll will stop when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](/plugins/auto-scroll/#stoponinteraction) is also `false`, auto scroll will resume when the mouse leaves the carousel container. + +--- + +### stopOnFocusIn + +Type: `boolean` +Default: `true` + +When enabled, auto scroll will stop when a focusable element inside the carousel recieves focus. If [stopOnInteraction](/plugins/auto-scroll/#stoponinteraction) is `false`, auto scroll will resume when the user leaves focus. + +--- + +### rootNode + +Type: `(emblaRoot: HTMLElement) => HTMLElement | null` +Default: `null` + +The **node** that should **respond** to user **interactions** like [stopOnMouseEnter](/plugins/auto-scroll/#stoponmouseenter) and [stopOnInteraction](/plugins/auto-scroll/#stoponinteraction). If this is omitted, the node that wraps the Embla Carousel will be used as default. + +--- + +## Methods + +Below follows an exhaustive **list of all** `Auto Scroll` **methods** with their respective parameters and return values. + +--- + +### play + +Parameters: `startDelayOverride?: number` +Returns: `void` + +Start auto scroll. Pass a **startDelayOverride** if you want to change the [startDelay](/plugins/auto-scroll/#startdelay) option after the plugin has been initialized. + +--- + +### stop + +Parameters: `none` +Returns: `void` + +Stops auto scroll. + +--- + +### reset + +Parameters: `none` +Returns: `void` + +Stops auto scroll, and starts the timer again using [startDelay](/plugins/auto-scroll/#startdelay) when the carousel has settled. This will only take effect if auto scroll is playing. If auto scroll is stopped, this method won't trigger anything. + +--- + +### isPlaying + +Parameters: `none` +Returns: `boolean` + +Returns a boolean whether the carousel is auto scrolling or not. + +--- + +## Events + +Below follows an exhaustive **list of all** `Auto Scroll` **events** together with information about how they work. + +--- + +### autoScroll:play + +Once: `no` + +Fires when auto scroll starts playing. + +--- + +### autoScroll:stop + +Once: `no` + +Fires when auto scroll stops scrolling. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx index 645c97a05..a3d76d68a 100644 --- a/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx +++ b/packages/embla-carousel-docs/src/content/pages/plugins/autoplay.mdx @@ -1,6 +1,6 @@ --- title: Autoplay -description: Learn how to add this Autoplay plugin to Embla Carousel +description: Learn how to use the Autoplay plugin for Embla Carousel order: 0 date: 2021-03-13 --- @@ -21,9 +21,16 @@ This plugin is used to extend Embla Carousel with **autoplay** functionality. It ## Installation -First you need to install the **npm package** and save it to your dependencies: +Start by installing the **npm package** and save it to your dependencies: + + + ```html + + ``` + + ```shell @@ -40,40 +47,13 @@ First you need to install the **npm package** and save it to your dependencies: -Alternatively, you can use a **CDN** to include it in your project: - -```html - -``` - ## Usage -This plugin accepts a single optional parameter, which is its [options](/plugins/autoplay/#options) object that allows you to configure it. You maybe want to choose a **custom root node** for the autoplay plugin. This can be done with the [rootNode](/plugins/autoplay/#rootnode) options attribute. The root node will respond to interaction events and stop autoplay when a user interacts with the carousel. If this attribute is omitted, the Embla Carousel root node will be used as a default. - -```js -import EmblaCarousel from 'embla-carousel' -import Autoplay from 'embla-carousel-autoplay' - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [Autoplay()]) // Add plugin -``` +Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**. ## Options -The Autoplay plugin accepts an optional **options** object as the first argument. Here's an example of how to make use of it: - -```js -import EmblaCarousel from 'embla-carousel' -import Autoplay from 'embla-carousel-autoplay' - -const autoplayOptions = { - delay: 4000, - rootNode: (emblaRoot) => emblaRoot.parentElement -} - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [ - Autoplay(autoplayOptions) // Add plugin with options -]) -``` +Below follows an exhaustive **list of all** `Autoplay` **options** and their default values. --- @@ -109,7 +89,7 @@ If set to `false`, you'll have to start autoplay yourself by calling the [play]( Type: `boolean` Default: `true` -If set to `false`, autoplay will not be disabled after drag interactions, and it will restart every time after the interaction. +If set to `false`, autoplay will not be disabled after drag interactions, and it will restart every time after an interaction. --- @@ -118,7 +98,7 @@ If set to `false`, autoplay will not be disabled after drag interactions, and it Type: `boolean` Default: `false` -When enabled, autoplay will pause when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is also `false`, autoplay will resume when the mouse leaves the carousel container. +When enabled, autoplay will stop when a mouse pointer enters the Embla Carousel container. If [stopOnInteraction](/plugins/autoplay/#stoponinteraction) is also `false`, autoplay will resume when the mouse leaves the carousel container. --- @@ -145,17 +125,13 @@ If this parameter is enabled, autoplay will stop when it reaches last slide. Type: `(emblaRoot: HTMLElement) => HTMLElement | null` Default: `null` -The node that should respond to user interactions like [stopOnMouseEnter](/plugins/autoplay/#stoponmouseenter) and [stopOnInteraction](/plugins/autoplay/#stoponinteraction). +The **node** that should **respond** to user **interactions** like [stopOnMouseEnter](/plugins/autoplay/#stoponmouseenter) and [stopOnInteraction](/plugins/autoplay/#stoponinteraction). If this is omitted, the node that wraps the Embla Carousel will be used as default. --- ## Methods -The Autoplay plugin exposes a set of **useful methods** which lets you control it. Assuming you've passed the plugin to the Embla Carousel constructor, a method is called like demonstrated below: - -```js -embla.plugins().autoplay.stop() // Method -``` +Below follows an exhaustive **list of all** `Autoplay` **methods** with their respective parameters and return values. --- @@ -197,13 +173,7 @@ Returns a boolean whether autoplay is playing or not. ## Events -Below follows an exhaustive list of all Autoplay plugin events together with information about how they work. Attach event listeners like so: - -```ts -emblaApi.on('autoplay:play', (emblaApi, eventName) => { - console.log('Autoplay plugin started playing!') -}) -``` +Below follows an exhaustive **list of all** `Autoplay` **events** together with information about how they work. --- diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx index 44e07cea8..0528a62fd 100644 --- a/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx +++ b/packages/embla-carousel-docs/src/content/pages/plugins/class-names.mdx @@ -1,7 +1,7 @@ --- title: Class Names -description: Learn how to add this Class Name plugin to Embla Carousel -order: 2 +description: Learn how to use the Class Names plugin for Embla Carousel +order: 3 date: 2021-11-22 --- @@ -24,6 +24,13 @@ Class Names is a **class name toggle** utility plugin for Embla Carousel that en First you need to install the **npm package** and save it to your dependencies: + + + ```html + + ``` + + ```shell @@ -40,37 +47,13 @@ First you need to install the **npm package** and save it to your dependencies: -Alternatively, you can use a **CDN** to include it in your project: - -```html - -``` - ## Usage -This plugin accepts a single **optional** parameter, which is its [options](/plugins/class-names/#options) object that allows you to configure it. - -```js -import EmblaCarousel from 'embla-carousel' -import ClassNames from 'embla-carousel-class-names' - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [ClassNames()]) // Add plugin -``` +Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**. ## Options -The Class Name plugin accepts an optional **options** object as the first argument. Here's an example of how to make use of it: - -```js -import EmblaCarousel from 'embla-carousel' -import ClassNames from 'embla-carousel-class-names' - -const classNamesOptions = { selected: 'my-selected-class' } - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [ - ClassNames(classNamesOptions) // Add plugin with options -]) -``` +Below follows an exhaustive **list of all** `Class Names` **options** and their default values. --- @@ -112,3 +95,5 @@ Type: `string` Default: `is-dragging` Choose a classname that will be applied to the container when dragging. Pass an empty string to opt-out. + +--- diff --git a/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx b/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx index 208a97ed8..0f77e34b6 100644 --- a/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx +++ b/packages/embla-carousel-docs/src/content/pages/plugins/wheel-gestures.mdx @@ -1,7 +1,7 @@ --- title: Wheel Gestures description: Learn how to add this Wheel Gesture plugin to Embla Carousel -order: 3 +order: 4 date: 2021-11-22 --- @@ -15,7 +15,7 @@ import { TABS_PACKAGE_MANAGER } from 'consts/tabs' View plugin on GitHub -This plugin is used to extend Embla Carousel with the ability to use the mouse/trackpad wheel to navigate through the carousel. +This plugin is used to extend Embla Carousel with the ability to **use the mouse/trackpad wheel** to **navigate** the carousel. --- @@ -24,6 +24,13 @@ This plugin is used to extend Embla Carousel with the ability to use the mouse/t First you need to install the **npm package** and save it to your dependencies: + + + ```html + + ``` + + ```shell @@ -40,12 +47,6 @@ First you need to install the **npm package** and save it to your dependencies: -Alternatively, you can use a **CDN** to include it in your project: - -```html - -``` - ## Usage This plugin accepts a single **optional** parameter, which is its [options](/plugins/wheel-gestures/#options) object that allows you to configure it. @@ -59,20 +60,7 @@ const embla = EmblaCarousel(emblaRoot, { loop: false }, [WheelGesturesPlugin()]) ## Options -The Wheel Gestures plugin accepts an optional **options** object as the first argument. Here's an example of how to make use of it: - -```js -import EmblaCarousel from 'embla-carousel' -import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures' - -const wheelGesturesOptions = { - wheelDraggingClass: 'my-wheel-class' -} - -const embla = EmblaCarousel(emblaRoot, { loop: false }, [ - WheelGesturesPlugin(wheelGesturesOptions) // Add plugin with options -]) -``` +Below follows an exhaustive **list of all** `Wheel Gestures` **options** and their default values. --- @@ -100,3 +88,5 @@ Type: `Element` Default: `undefined` Specify the element that should be observed for wheel events. + +--- diff --git a/packages/embla-carousel-react/README.md b/packages/embla-carousel-react/README.md index f9c33b608..ddfb9bc44 100644 --- a/packages/embla-carousel-react/README.md +++ b/packages/embla-carousel-react/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-reactive-utils/README.md b/packages/embla-carousel-reactive-utils/README.md index 5c974667c..c8e5e0355 100644 --- a/packages/embla-carousel-reactive-utils/README.md +++ b/packages/embla-carousel-reactive-utils/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-solid/README.md b/packages/embla-carousel-solid/README.md index 909e68db8..45de28a0d 100644 --- a/packages/embla-carousel-solid/README.md +++ b/packages/embla-carousel-solid/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-svelte/README.md b/packages/embla-carousel-svelte/README.md index e7a8ee01f..310b9a360 100644 --- a/packages/embla-carousel-svelte/README.md +++ b/packages/embla-carousel-svelte/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel-vue/README.md b/packages/embla-carousel-vue/README.md index ca8a552ca..ec893f37e 100644 --- a/packages/embla-carousel-vue/README.md +++ b/packages/embla-carousel-vue/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/packages/embla-carousel/README.md b/packages/embla-carousel/README.md index a1f151a82..31b3db22c 100644 --- a/packages/embla-carousel/README.md +++ b/packages/embla-carousel/README.md @@ -125,6 +125,8 @@ + + @@ -141,8 +143,6 @@ - -

diff --git a/yarn.lock b/yarn.lock index 6b1acb998..128d9fb80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8743,6 +8743,27 @@ __metadata: languageName: unknown linkType: soft +"embla-carousel-auto-scroll@workspace:packages/embla-carousel-auto-scroll": + version: 0.0.0-use.local + resolution: "embla-carousel-auto-scroll@workspace:packages/embla-carousel-auto-scroll" + dependencies: + "@types/jest": ^29.5.6 + "@typescript-eslint/eslint-plugin": ^6.9.0 + "@typescript-eslint/parser": ^6.9.0 + eslint: ^8.52.0 + eslint-config-prettier: ^9.0.0 + eslint-plugin-prettier: ^4.0.0 + jest: ^29.5.0 + jest-environment-jsdom: ^29.5.0 + prettier: 2.8.8 + rollup: ^4.1.5 + ts-jest: ^29.1.1 + typescript: ^5.2.2 + peerDependencies: + embla-carousel: 8.0.0-rc20 + languageName: unknown + linkType: soft + "embla-carousel-autoplay@8.0.0-rc20, embla-carousel-autoplay@workspace:packages/embla-carousel-autoplay": version: 0.0.0-use.local resolution: "embla-carousel-autoplay@workspace:packages/embla-carousel-autoplay"