Implement #307.

README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel"><img src="https://img.shields.io/npm/v/embla-carousel.svg?color=%23c1a8e2"></a>
@@ -66,8 +68,10 @@
     </a>
     &nbsp;
     <a href="https://www.embla-carousel.com/get-started/vue/">
-      <img src="https://www.embla-carousel.com/vue-logo.svg" width="45" 
-      height="45" />
+      <img src="https://www.embla-carousel.com/vue-logo.svg" width="45" height="45" />
+    &nbsp;
+    <a href="https://www.embla-carousel.com/get-started/svelte/">
+      <img src="https://www.embla-carousel.com/svelte-logo.svg" width="45" height="45" />
     </a>
   </p>
 </div>

package.json

@@ -17,6 +17,7 @@
     "packages/embla-carousel",
     "packages/embla-carousel-react",
     "packages/embla-carousel-vue",
+    "packages/embla-carousel-svelte",
     "packages/embla-carousel-docs",
     "packages/embla-carousel-autoplay",
     "packages/embla-carousel-auto-height",

packages/embla-carousel-auto-height/README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel-auto-height?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel-auto-height"><img src="https://img.shields.io/npm/v/embla-carousel-auto-height.svg?color=%23c1a8e2"></a>

packages/embla-carousel-auto-height/package.json

@@ -22,7 +22,8 @@
     "javascript",
     "typescript",
     "react",
-    "vue"
+    "vue",
+    "svelte"
   ],
   "unpkg": "embla-carousel-auto-height.umd.js",
   "main": "embla-carousel-auto-height.cjs.js",

packages/embla-carousel-autoplay/README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel-autoplay?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel-autoplay"><img src="https://img.shields.io/npm/v/embla-carousel-autoplay.svg?color=%23c1a8e2"></a>

packages/embla-carousel-autoplay/package.json

@@ -22,7 +22,8 @@
     "javascript",
     "typescript",
     "react",
-    "vue"
+    "vue",
+    "svelte"
   ],
   "unpkg": "embla-carousel-autoplay.umd.js",
   "main": "embla-carousel-autoplay.cjs.js",

packages/embla-carousel-class-names/README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel-class-names?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel-class-names"><img src="https://img.shields.io/npm/v/embla-carousel-class-names.svg?color=%23c1a8e2"></a>

packages/embla-carousel-class-names/package.json

@@ -22,7 +22,8 @@
     "javascript",
     "typescript",
     "react",
-    "vue"
+    "vue",
+    "svelte"
   ],
   "unpkg": "embla-carousel-class-names.umd.js",
   "main": "embla-carousel-class-names.cjs.js",

packages/embla-carousel-docs/README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel"><img src="https://img.shields.io/npm/v/embla-carousel.svg?color=%23c1a8e2"></a>

packages/embla-carousel-docs/src/content/pages/api/options.md

@@ -175,6 +175,16 @@ import emblaCarouselVue from 'embla-carousel-vue'
 emblaCarouselVue.globalOptions = { loop: true }
 ```
 
+### Svelte global options
+
+**Svelte** users can set global options by assigning them to the `emblaCarouselSvelte` action:
+
+```js
+import emblaCarouselSvelte from 'embla-carousel-svelte'
+
+emblaCarouselSvelte.globalOptions = { loop: true }
+```
+
 Make sure to assign global options **before** initializing any carousel. You should **only assign it once**, because re-assigning global options can lead to confusing code and unexpected behaviour.
 
 ## Option priority

packages/embla-carousel-docs/src/content/pages/get-started/cdn.md

@@ -1,7 +1,7 @@
 ---
 title: CDN
 description: Learn how to setup Embla Carousel using a CDN.
-order: 4
+order: 5
 date: 2021-02-21
 ---
 
@@ -39,7 +39,6 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
   display: flex;
 }
 .embla__slide {
-  position: relative;
   flex: 0 0 100%;
 }
 ```

packages/embla-carousel-docs/src/content/pages/get-started/ie11-support.md

@@ -1,7 +1,7 @@
 ---
 title: IE11
 description: How to add Internet Explorer 11 support to Embla Carousel.
-order: 4
+order: 6
 date: 2021-02-21
 ---
 

packages/embla-carousel-docs/src/content/pages/get-started/module.md

@@ -39,7 +39,6 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov
   display: flex;
 }
 .embla__slide {
-  position: relative;
   flex: 0 0 100%;
 }
 ```

packages/embla-carousel-docs/src/content/pages/get-started/react.md

@@ -48,7 +48,6 @@ The hook gives us a **ref** to attach to our wrapping element with the classname
   display: flex;
 }
 .embla__slide {
-  position: relative;
   flex: 0 0 100%;
 }
 ```

packages/embla-carousel-docs/src/content/pages/get-started/svelte.md

@@ -0,0 +1,103 @@
+---
+title: Svelte
+description: Learn how to setup Embla Carousel using Svelte.
+order: 3
+date: 2021-02-21
+---
+
+# Svelte
+
+Start by installing the Embla Carousel **npm package** and add it to your dependencies.
+
+```shell
+npm install embla-carousel-svelte --save
+```
+
+Embla Carousel provides the handy `emblaCarouselSvelte` action for seamless integration with Svelte. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
+
+```html
+<script>
+  import emblaCarouselSvelte from 'embla-carousel-svelte'
+</script>
+
+<div class="embla" use:emblaCarouselSvelte>
+  <div class="embla__container">
+    <div class="embla__slide">Slide 1</div>
+    <div class="embla__slide">Slide 2</div>
+    <div class="embla__slide">Slide 3</div>
+  </div>
+</div>
+```
+
+## Styling the carousel
+
+The element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
+
+```html
+<style>
+  .embla {
+    overflow: hidden;
+  }
+  .embla__container {
+    display: flex;
+  }
+  .embla__slide {
+    flex: 0 0 100%;
+  }
+</style>
+```
+
+## Accessing the carousel API
+
+The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options/) as part of its parameter. Additionally, you can access the [API](/api/) by using the `init` event to store the carousel instance in a variable:
+
+```html{6-8, 10-13, 16}
+<script>
+  import emblaCarouselSvelte from 'embla-carousel-svelte'
+
+  let emblaApi
+
+  const emblaConfig = {
+    options: { loop: false },
+  }
+
+  const onInit = (event) => {
+    emblaApi = event.detail
+    // Embla API is ready
+  }
+</script>
+
+<div class="embla" use:emblaCarouselSvelte={emblaConfig} on:init={onInit}>
+  <div class="embla__container">
+    <div class="embla__slide">Slide 1</div>
+    <div class="embla__slide">Slide 2</div>
+    <div class="embla__slide">Slide 3</div>
+  </div>
+</div>
+```
+
+## Adding plugins
+
+The `emblaCarouselSvelte` action parameter also accepts [plugins](/plugins/). Note that plugins need to be passed in an array like so:
+
+```html{3, 7}
+<script>
+  import emblaCarouselSvelte from 'embla-carousel-svelte'
+  import Autoplay from 'embla-carousel-autoplay'
+
+  const emblaConfig = {
+    options: { loop: false },
+    plugins: [Autoplay()],
+  }
+</script>
+
+<div class="embla" use:emblaCarouselSvelte={emblaConfig}>
+  <div class="embla__container">
+    <div class="embla__slide">Slide 1</div>
+    <div class="embla__slide">Slide 2</div>
+    <div class="embla__slide">Slide 3</div>
+  </div>
+</div>
+```
+
+Congratulations! You just created your first Embla Carousel component.

packages/embla-carousel-docs/src/content/pages/get-started/typescript.md

@@ -1,7 +1,7 @@
 ---
 title: TypeScript
 description: Learn how to setup Embla Carousel using TypeScript.
-order: 3
+order: 4
 date: 2021-02-21
 ---
 
@@ -11,7 +11,6 @@ Before continuing with this guide, make sure to setup a working carousel followi
 
 - [module](/get-started/module/)
 - [react](/get-started/react/)
-- [vue](/get-started/vue/)
 
 Embla Carousel and all its related packages are fully typed and has built-in type definitions, because they're written in TypeScript.
 

packages/embla-carousel-docs/src/content/pages/get-started/vue.md

@@ -53,7 +53,6 @@ The `emblaCarouselVue` function gives us an **emblaNode** to attach to our wrapp
     display: flex;
   }
   .embla__slide {
-    position: relative;
     flex: 0 0 100%;
   }
 </style>

packages/embla-carousel-react/README.md

@@ -5,6 +5,8 @@
     </a>
   </p>
 
+  <br>
+
   <p align="center">
     <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
     <a href="https://www.npmjs.com/package/embla-carousel-react"><img src="https://img.shields.io/npm/v/embla-carousel-react.svg?color=%23c1a8e2"></a>

packages/embla-carousel-react/package.json

@@ -22,7 +22,8 @@
     "javascript",
     "typescript",
     "react",
-    "vue"
+    "vue",
+    "svelte"
   ],
   "unpkg": "embla-carousel-react.umd.js",
   "main": "embla-carousel-react.cjs.js",

packages/embla-carousel-svelte/.eslintignore

@@ -0,0 +1,5 @@
+docs
+package.json
+package-lock.json
+yarn.lock
+node_modules

packages/embla-carousel-svelte/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: { jsx: true },
+  },
+  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',
+  },
+}

packages/embla-carousel-svelte/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.js')