diff --git a/packages/embla-carousel-docs/gatsby-browser.js b/packages/embla-carousel-docs/gatsby-browser.js
index ab769a01e..f69a060d0 100644
--- a/packages/embla-carousel-docs/gatsby-browser.js
+++ b/packages/embla-carousel-docs/gatsby-browser.js
@@ -1,3 +1,5 @@
+import 'inter-ui/inter.css'
+
export const onClientEntry = async () => {
if (typeof window.IntersectionObserver === 'undefined') {
await import('intersection-observer')
diff --git a/packages/embla-carousel-docs/gatsby-ssr.js b/packages/embla-carousel-docs/gatsby-ssr.js
index 822de3c06..883c68bbd 100644
--- a/packages/embla-carousel-docs/gatsby-ssr.js
+++ b/packages/embla-carousel-docs/gatsby-ssr.js
@@ -25,7 +25,7 @@ export const onRenderBody = ({
,
+```
+
+## Accessing the carousel API
+
+The `emblaCarouselVue` function takes the Embla Carousel [options](/api/options/) as the first argument. Additionally, you can access the [API](/api/) with an `onMounted` like demonstrated below:
+
+```html{17, 19-23}
+
+
+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+
+
+
+```
+
+## Adding plugins
+
+The `emblaCarouselVue` function also accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an array like so:
+
+```html{13, 17}
+
+
+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+
+
+
+```
+
+Congratulations! You just created your first Embla Carousel component.
diff --git a/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md b/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md
index b07e6ef1c..e79125880 100644
--- a/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md
+++ b/packages/embla-carousel-docs/src/content/pages/guides/breakpoints.md
@@ -41,18 +41,49 @@ Embla Carousel will **automatically pick up** any **changes in gap sizes** when
## Changing options
-You can change your [options](/api/options/) based on your breakpoints right in your CSS. **Make sure the JSON string is on a single line for the CSS parser to parse it correctly.**
+You can provide [options](/api/options/) that will be applied for specific breakpoints using the [breakpoint](/api/options/#breakpoints) option.
-Here's an example of a carousel that's only draggable when the screen width is less than 768px:
+Here's an example of a carousel that's only active when the screen width is less than 768px:
-```css-with-json
-.embla:before {
- display: none;
- content: '{ "draggable": true }'; /* Draggable as default */
+```js
+const options = {
+ active: true,
+ breakpoints: {
+ '(min-width: 768px)': { active: false },
+ },
}
-@media (min-width: 768px) {
- .embla:before {
- content: '{ "draggable": false }'; /* Not draggable SM up */
- }
+```
+
+Because the default [active](/api/options/#active) value is `true`, we can omit it from the root level and achieve the same result as above like this:
+
+```js
+const options = {
+ breakpoints: {
+ '(min-width: 768px)': { active: false },
+ },
+}
+```
+
+When breakpoint options **are in conflict**, the last option in the breakpoints options will be applied:
+
+```js
+const options = {
+ loop: false,
+ breakpoints: {
+ '(min-width: 768px)': { loop: true },
+ '(min-width: 420px)': { loop: false }, // This will override the (min-width: 768px) breakpoint loop option
+ },
+}
+```
+
+If multiple queries match, they will be **merged**:
+
+```js
+const options = {
+ loop: false, // --> 419px screens and down will apply { loop: false }
+ breakpoints: {
+ '(min-width: 420px)': { align: 'start' }, // --> 420px screens and up will apply { align: 'start', loop: false }
+ '(min-width: 768px)': { loop: true }, // --> 768px screens and up will apply { align: 'start', loop: true }
+ },
}
```
diff --git a/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md b/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md
index b96a8c9f8..ed5811a06 100644
--- a/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md
+++ b/packages/embla-carousel-docs/src/content/pages/guides/slide-sizes.md
@@ -7,10 +7,14 @@ date: 2021-03-13
# Slide Sizes
-> **Note!** If you haven't read about how to setup your slide [container](/guides/slide-container/), please visit that guide before continuing with this.
-
This guide will show you how to customize **slide sizes** for your carousels using the [flexbox](/guides/slide-container/#using-flexbox) setup. Embla Carousel supports horizontal and vertical carousels with the [axis](/api/options/#axis) option and that's why this guide will use the term **slide sizes** instead of **widths** or **heights**.
+
+
+If you haven't read about how to setup your slide [container](/guides/slide-container/), please visit that guide before continuing with this.
+
+
+
## Declaring sizes
Slide sizes should in most cases be **declared with CSS**. Embla Carousel **supports any slide size out of the box**, and will pick up whatever size you've declared in your CSS. A very simple setup could look like this:
diff --git a/packages/embla-carousel-docs/src/templates/Home.tsx b/packages/embla-carousel-docs/src/templates/Home.tsx
index 361475c33..255e92e6a 100644
--- a/packages/embla-carousel-docs/src/templates/Home.tsx
+++ b/packages/embla-carousel-docs/src/templates/Home.tsx
@@ -49,7 +49,7 @@ const Home = (props: PropType) => {
"name": "${removeProtocol(siteUrl)}",
"description": "${description}",
"url": "${siteUrl}/",
- "image": "${siteUrl}/share-image.jpg",
+ "image": "${siteUrl}/share-image.png",
"logo": "${siteUrl}${maskable}"
}
`}
diff --git a/packages/embla-carousel-docs/src/templates/Page.tsx b/packages/embla-carousel-docs/src/templates/Page.tsx
index 43b16f8ed..36c9d0f65 100644
--- a/packages/embla-carousel-docs/src/templates/Page.tsx
+++ b/packages/embla-carousel-docs/src/templates/Page.tsx
@@ -69,7 +69,7 @@ const Page = (props: PropType) => {
"description": "${description}",
"url": "${siteUrl}${pageContext.slug}",
"headline": "${title}",
- "image": "${siteUrl}/share-image.jpg",
+ "image": "${siteUrl}/share-image.png",
"datePublished": "${dateToISOString}",
"dateModified": "${dateToISOString}",
"author": {
diff --git a/packages/embla-carousel-docs/src/utils/declarations.d.ts b/packages/embla-carousel-docs/src/utils/declarations.d.ts
index 0dce7dd40..28a63d271 100644
--- a/packages/embla-carousel-docs/src/utils/declarations.d.ts
+++ b/packages/embla-carousel-docs/src/utils/declarations.d.ts
@@ -4,6 +4,11 @@ declare module '*.svg' {
export default content
}
+declare module 'assets/images/*.svg' {
+ const content: string
+ export default content
+}
+
declare module '*.jpg' {
const content: string
export default content
diff --git a/packages/embla-carousel-docs/src/utils/gradientBackgroundStyles.ts b/packages/embla-carousel-docs/src/utils/gradientBackgroundStyles.ts
index bd87a9c59..244b41c60 100644
--- a/packages/embla-carousel-docs/src/utils/gradientBackgroundStyles.ts
+++ b/packages/embla-carousel-docs/src/utils/gradientBackgroundStyles.ts
@@ -1,9 +1,10 @@
import { css } from 'styled-components'
+import { COLORS } from 'consts'
export const gradientBackgroundStyles = css`
background-image: linear-gradient(
45deg,
- var(--brand-primary),
- var(--brand-secondary)
+ ${COLORS.BRAND_PRIMARY},
+ ${COLORS.BRAND_SECONDARY}
);
`
diff --git a/packages/embla-carousel-docs/src/utils/gradientTextStyles.ts b/packages/embla-carousel-docs/src/utils/gradientTextStyles.ts
index 9837b1c92..92d0c2d13 100644
--- a/packages/embla-carousel-docs/src/utils/gradientTextStyles.ts
+++ b/packages/embla-carousel-docs/src/utils/gradientTextStyles.ts
@@ -1,9 +1,9 @@
import { gradientBackgroundStyles } from './gradientBackgroundStyles'
-import { supportsStyles } from 'consts'
+import { COLORS, supportsStyles } from 'consts'
import { css } from 'styled-components'
export const gradientTextStyles = css`
- color: var(--brand-primary);
+ color: ${COLORS.BRAND_PRIMARY};
${supportsStyles.gradientText} {
${gradientBackgroundStyles};
background-clip: text;
diff --git a/packages/embla-carousel-docs/src/utils/hiddenAtBreakpointStyles.ts b/packages/embla-carousel-docs/src/utils/hiddenAtBreakpointStyles.ts
index 47066a28e..97779f16e 100644
--- a/packages/embla-carousel-docs/src/utils/hiddenAtBreakpointStyles.ts
+++ b/packages/embla-carousel-docs/src/utils/hiddenAtBreakpointStyles.ts
@@ -1,11 +1,11 @@
import { css } from 'styled-components'
-import { breakpoints, BreakpointKeyType } from 'consts'
+import { MEDIA, BreakpointKeyType } from 'consts'
export const hiddenAtBreakpointStyles = css<{ $hidden?: BreakpointKeyType }>`
${({ $hidden }) =>
$hidden &&
css`
- ${breakpoints[$hidden]} {
+ ${MEDIA[$hidden]} {
display: none;
}
`};
diff --git a/packages/embla-carousel-docs/static/embla-logo.svg b/packages/embla-carousel-docs/static/embla-logo.svg
index f7fe016ca..d61e9dff7 100644
--- a/packages/embla-carousel-docs/static/embla-logo.svg
+++ b/packages/embla-carousel-docs/static/embla-logo.svg
@@ -1,9 +1 @@
-
\ No newline at end of file
+
diff --git a/packages/embla-carousel-docs/static/share-image.jpg b/packages/embla-carousel-docs/static/share-image.jpg
deleted file mode 100644
index 4c1636e7e..000000000
Binary files a/packages/embla-carousel-docs/static/share-image.jpg and /dev/null differ
diff --git a/packages/embla-carousel-docs/static/share-image.png b/packages/embla-carousel-docs/static/share-image.png
new file mode 100644
index 000000000..727b24be2
Binary files /dev/null and b/packages/embla-carousel-docs/static/share-image.png differ
diff --git a/packages/embla-carousel-docs/static/share-image.svg b/packages/embla-carousel-docs/static/share-image.svg
new file mode 100644
index 000000000..7524bdd00
--- /dev/null
+++ b/packages/embla-carousel-docs/static/share-image.svg
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/packages/embla-carousel-docs/static/vue-logo.svg b/packages/embla-carousel-docs/static/vue-logo.svg
new file mode 100644
index 000000000..3bdaee961
--- /dev/null
+++ b/packages/embla-carousel-docs/static/vue-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/embla-carousel-react/README.md b/packages/embla-carousel-react/README.md
index 394eadc56..f356463cc 100644
--- a/packages/embla-carousel-react/README.md
+++ b/packages/embla-carousel-react/README.md
@@ -1,7 +1,7 @@
+ 
+
+
+ 
+