@kiva/kv-components 4.3.3 → 4.5.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.5.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.4.0...@kiva/kv-components@4.5.0) (2025-01-03)
+
+
+### Features
+
+* add autoplay and fade plugin options for carousels ([b85b0c2](https://github.com/kiva/kv-ui-elements/commit/b85b0c20fbff52663c823a984db53fbb41baf0a4))
+
+
+
+
+
+# [4.4.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.3.3...@kiva/kv-components@4.4.0) (2025-01-02)
+
+
+### Features
+
+* add browser API mocks to test embla carousel ([e4e8bd1](https://github.com/kiva/kv-ui-elements/commit/e4e8bd11812faf75ed12d7258cdaf7f024f86c45))
+* update embla to latest version ([6d37f77](https://github.com/kiva/kv-ui-elements/commit/6d37f7734072e595e6648592050b55027be537a5))
+
+
+
+
+
 ## [4.3.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.3.2...@kiva/kv-components@4.3.3) (2024-12-20)
 
 

package/dist/components/KvCarousel.vue

@@ -180,6 +180,22 @@ export default {
 				return {};
 			},
 		},
+		/**
+		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
+		 * */
+		autoplayOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
+		 * */
+		fadeEnabled: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * The type of logic to implement when deciding how many slides
 		 * to scroll when pressing the next/prev button
@@ -233,6 +249,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			nextIndex,
 			onCarouselContainerClick,
 			previousIndex,
@@ -242,6 +259,7 @@ export default {
 			slideIndicatorCount,
 			slideIndicatorListLength,
 			slides,
+			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots });
 
 		return {
@@ -251,6 +269,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			mdiArrowLeft,
 			mdiArrowRight,
 			mdiChevronLeft,
@@ -264,6 +283,7 @@ export default {
 			slideIndicatorCount,
 			slideIndicatorListLength,
 			slides,
+			toggleAutoPlay,
 		};
 	},
 };

package/dist/components/KvVerticalCarousel.vue

@@ -107,6 +107,22 @@ export default {
 			default: 'auto',
 			validator: (value) => ['visible', 'auto'].indexOf(value) !== -1,
 		},
+		/**
+		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
+		 * */
+		autoplayOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
+		 * */
+		fadeEnabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -120,6 +136,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			nextIndex,
 			onCarouselContainerClick,
 			previousIndex,
@@ -128,6 +145,7 @@ export default {
 			rootEl,
 			slideIndicatorCount,
 			slides,
+			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
 		return {
@@ -137,6 +155,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,
@@ -147,6 +166,7 @@ export default {
 			rootEl,
 			slideIndicatorCount,
 			slides,
+			toggleAutoPlay,
 		};
 	},
 };

package/dist/components/stories/KvCarousel.stories.js

@@ -424,3 +424,81 @@ export const ThreeDimensional = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const AutoPlayAutomatically = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			style="max-width: 400px;"
+			:embla-options="{ loop: false }"
+			:autoplay-options="{ playOnInit: true, delay: 3000 }"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const AutoPlayButton = () => ({
+	components: {
+		KvCarousel,
+	},
+	data() {
+		return {
+			isPlaying: false,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@interact-carousel="carouselInteraction"
+			>
+				${defaultCarouselSlides}
+			</kv-carousel>
+			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<br/>
+			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+		</div>
+	`,
+	methods: {
+		toggleAutoPlay() {
+			this.$refs.sampleCarousel.toggleAutoPlay();
+		},
+		carouselInteraction() {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		},
+	},
+});
+
+export const Fade = () => ({
+	components: {
+		KvCarousel,
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:fade-enabled="true"
+			>
+				${defaultCarouselSlides}
+			</kv-carousel>
+		</div>
+	`,
+});

package/dist/components/stories/KvVerticalCarousel.stories.js

@@ -166,3 +166,81 @@ export const CustomStartIndex = () => ({
 		</kv-vertical-carousel>
 	`,
 });
+
+export const AutoPlayAutomatically = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	template: `
+		<kv-vertical-carousel
+			style="max-width: 400px;"
+			:embla-options="{ loop: false }"
+			:autoplay-options="{ playOnInit: true, delay: 3000 }"
+		>
+			${defaultCarouselSlides}
+		</kv-vertical-carousel>
+	`,
+});
+
+export const AutoPlayButton = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	data() {
+		return {
+			isPlaying: false,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@interact-carousel="carouselInteraction"
+			>
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<br/>
+			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+		</div>
+	`,
+	methods: {
+		toggleAutoPlay() {
+			this.$refs.sampleCarousel.toggleAutoPlay();
+		},
+		carouselInteraction() {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		},
+	},
+});
+
+export const Fade = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:fade-enabled="true"
+			>
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+		</div>
+	`,
+});

package/dist/utils/carousels.cjs

@@ -34,6 +34,8 @@ __export(carousels_exports, {
 module.exports = __toCommonJS(carousels_exports);
 var import_vue_demi = require("vue-demi");
 var import_embla_carousel = __toESM(require("embla-carousel"), 1);
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
+var import_embla_carousel_fade = __toESM(require("embla-carousel-fade"), 1);
 
 // utils/throttle.js
 function throttle(func, timeFrame) {
@@ -51,6 +53,8 @@ function throttle(func, timeFrame) {
 function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   var _a;
   const {
+    autoplayOptions,
+    fadeEnabled,
     emblaOptions,
     slidesToScroll
   } = (0, import_vue_demi.toRefs)(props);
@@ -88,6 +92,22 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     emit("interact-carousel", interactionType);
   };
+  const toggleAutoPlay = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return;
+    const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+    playOrStop();
+    handleUserInteraction(null, "autoplay");
+  };
+  const isAutoplaying = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return false;
+    return autoplay.isPlaying();
+  };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
     slideIndicatorCount.value = indicator;
@@ -124,6 +144,13 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   };
   (0, import_vue_demi.onMounted)(async () => {
     var _a2;
+    const combinedPluginOptions = [];
+    if (Object.keys(autoplayOptions.value).length !== 0) {
+      combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
+    }
+    if (fadeEnabled.value) {
+      combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
+    }
     embla.value = (0, import_embla_carousel.default)(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -131,7 +158,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    });
+    }, combinedPluginOptions);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -175,7 +202,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     reInitVisible,
     onCarouselContainerClick,
     isAriaHidden,
-    slideIndicatorListLength
+    isAutoplaying,
+    slideIndicatorListLength,
+    toggleAutoPlay
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/utils/carousels.js

@@ -1,6 +1,6 @@
 import {
   carouselUtil
-} from "./chunk-AZPWOFD5.js";
+} from "./chunk-P6FXCNYP.js";
 import "./chunk-HV3AUBFT.js";
 import "./chunk-YCNMJ4YV.js";
 export {

package/dist/utils/{chunk-AZPWOFD5.js → chunk-P6FXCNYP.js}

@@ -12,9 +12,13 @@ import {
   nextTick
 } from "vue-demi";
 import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
 function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   var _a;
   const {
+    autoplayOptions,
+    fadeEnabled,
     emblaOptions,
     slidesToScroll
   } = toRefs(props);
@@ -52,6 +56,22 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     emit("interact-carousel", interactionType);
   };
+  const toggleAutoPlay = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return;
+    const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+    playOrStop();
+    handleUserInteraction(null, "autoplay");
+  };
+  const isAutoplaying = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return false;
+    return autoplay.isPlaying();
+  };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
     slideIndicatorCount.value = indicator;
@@ -88,6 +108,13 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   };
   onMounted(async () => {
     var _a2;
+    const combinedPluginOptions = [];
+    if (Object.keys(autoplayOptions.value).length !== 0) {
+      combinedPluginOptions.push(Autoplay(autoplayOptions.value));
+    }
+    if (fadeEnabled.value) {
+      combinedPluginOptions.push(Fade());
+    }
     embla.value = EmblaCarousel(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -95,7 +122,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    });
+    }, combinedPluginOptions);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -139,7 +166,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     reInitVisible,
     onCarouselContainerClick,
     isAriaHidden,
-    slideIndicatorListLength
+    isAutoplaying,
+    slideIndicatorListLength,
+    toggleAutoPlay
   };
 }
 

package/dist/utils/index.cjs

@@ -142,6 +142,8 @@ function useAttrs({ attrs, listeners }, ownEvents = []) {
 // utils/carousels.js
 var import_vue_demi = require("vue-demi");
 var import_embla_carousel = __toESM(require("embla-carousel"), 1);
+var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);
+var import_embla_carousel_fade = __toESM(require("embla-carousel-fade"), 1);
 
 // utils/throttle.js
 function throttle(func, timeFrame) {
@@ -159,6 +161,8 @@ function throttle(func, timeFrame) {
 function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   var _a;
   const {
+    autoplayOptions,
+    fadeEnabled,
     emblaOptions,
     slidesToScroll
   } = (0, import_vue_demi.toRefs)(props);
@@ -196,6 +200,22 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     emit("interact-carousel", interactionType);
   };
+  const toggleAutoPlay = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return;
+    const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+    playOrStop();
+    handleUserInteraction(null, "autoplay");
+  };
+  const isAutoplaying = () => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (!autoplay)
+      return false;
+    return autoplay.isPlaying();
+  };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
     slideIndicatorCount.value = indicator;
@@ -232,6 +252,13 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   };
   (0, import_vue_demi.onMounted)(async () => {
     var _a2;
+    const combinedPluginOptions = [];
+    if (Object.keys(autoplayOptions.value).length !== 0) {
+      combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
+    }
+    if (fadeEnabled.value) {
+      combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
+    }
     embla.value = (0, import_embla_carousel.default)(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -239,7 +266,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    });
+    }, combinedPluginOptions);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -283,7 +310,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     reInitVisible,
     onCarouselContainerClick,
     isAriaHidden,
-    slideIndicatorListLength
+    isAutoplaying,
+    slideIndicatorListLength,
+    toggleAutoPlay
   };
 }
 

package/dist/utils/index.js

@@ -31,7 +31,7 @@ import {
 } from "./chunk-3HK4G4NT.js";
 import {
   carouselUtil
-} from "./chunk-AZPWOFD5.js";
+} from "./chunk-P6FXCNYP.js";
 import {
   throttle
 } from "./chunk-HV3AUBFT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.3.3",
+  "version": "4.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -70,7 +70,9 @@
     "aria-hidden": "^1.1.3",
     "change-case": "^4.1.2",
     "date-fns": "^2.30.0",
-    "embla-carousel": "^4.5.3",
+    "embla-carousel": "^8.5.1",
+    "embla-carousel-autoplay": "^8.5.1",
+    "embla-carousel-fade": "^8.5.1",
     "flag-icons": "^7.2.3",
     "focus-trap": "^6.7.2",
     "moment": "^2.29.4",
@@ -96,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "9947b8a5d8bcfe549c154a92448e12f7ce5f3dc5"
+  "gitHead": "0facec90197844ded4496934e85b9014d4949237"
 }

package/tests/unit/specs/components/KvCarousel.spec.js

@@ -33,6 +33,35 @@ const defaultCarouselSlides = `
 	</template>
 `;
 
+// Mocking IntersectionObserver and ResizeObserver and matchMedia
+// required for embla carousel
+Object.defineProperty(window, 'IntersectionObserver', {
+	writable: true,
+	value: jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	})),
+});
+
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: jest.fn().mockImplementation((query) => ({
+		matches: [].includes(query),
+		addEventListener: jest.fn(),
+		removeEventListener: jest.fn(),
+	})),
+});
+
+Object.defineProperty(window, 'ResizeObserver', {
+	writable: true,
+	value: jest.fn().mockImplementation(() => ({
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+		disconnect: jest.fn(),
+	})),
+});
+
 describe('KvCarousel', () => {
 	it('has no automated accessibility violations', async () => {
 		const TestComponent = {

package/utils/carousels.js

@@ -8,10 +8,14 @@ import {
 	nextTick,
 } from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
+import Autoplay from 'embla-carousel-autoplay';
+import Fade from 'embla-carousel-fade';
 import { throttle } from './throttle';
 
 export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	const {
+		autoplayOptions,
+		fadeEnabled,
 		emblaOptions,
 		slidesToScroll,
 	} = toRefs(props);
@@ -53,6 +57,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	const goToSlide = (index) => {
 		embla.value.scrollTo(index);
 	};
+
 	const handleUserInteraction = async (index, interactionType) => {
 		if (index !== null && typeof index !== 'undefined') {
 			await nextTick(); // wait for embla.
@@ -66,7 +71,29 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		 */
 		emit('interact-carousel', interactionType);
 	};
+	/**
+	 * Start/Stop autoplay
+	 *
+	 * @public This is a public method
+	 */
+	const toggleAutoPlay = () => {
+		const autoplay = embla.value?.plugins()?.autoplay;
+		if (!autoplay) return;
+		const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+		playOrStop();
+		handleUserInteraction(null, 'autoplay');
+	};
 
+	/**
+	 * Returns true if the carousel is autoplaying
+	 *
+	 * @public This is a public method
+	 */
+	const isAutoplaying = () => {
+		const autoplay = embla.value?.plugins()?.autoplay;
+		if (!autoplay) return false;
+		return autoplay.isPlaying();
+	};
 	/**
 	 * Returns number of slides in the carousel
 	 *
@@ -93,6 +120,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			});
 		}
 	};
+
 	const reInit = () => {
 		embla.value.reInit();
 		if (slidesToScroll.value === 'visible') {
@@ -123,6 +151,13 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	};
 
 	onMounted(async () => {
+		const combinedPluginOptions = [];
+		if (Object.keys(autoplayOptions.value).length !== 0) {
+			combinedPluginOptions.push(Autoplay(autoplayOptions.value));
+		}
+		if (fadeEnabled.value) {
+			combinedPluginOptions.push(Fade());
+		}
 		embla.value = EmblaCarousel(rootEl.value, {
 			loop: true,
 			containScroll: 'trimSnaps',
@@ -130,7 +165,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			align: 'start',
 			...extraEmblaOptions,
 			...emblaOptions.value,
-		});
+		}, combinedPluginOptions);
 
 		if (slidesToScroll.value === 'visible') {
 			reInitVisible();
@@ -185,6 +220,8 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		reInitVisible,
 		onCarouselContainerClick,
 		isAriaHidden,
+		isAutoplaying,
 		slideIndicatorListLength,
+		toggleAutoPlay,
 	};
 }

package/vue/KvCarousel.vue

@@ -180,6 +180,22 @@ export default {
 				return {};
 			},
 		},
+		/**
+		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
+		 * */
+		autoplayOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
+		 * */
+		fadeEnabled: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * The type of logic to implement when deciding how many slides
 		 * to scroll when pressing the next/prev button
@@ -233,6 +249,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			nextIndex,
 			onCarouselContainerClick,
 			previousIndex,
@@ -242,6 +259,7 @@ export default {
 			slideIndicatorCount,
 			slideIndicatorListLength,
 			slides,
+			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots });
 
 		return {
@@ -251,6 +269,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			mdiArrowLeft,
 			mdiArrowRight,
 			mdiChevronLeft,
@@ -264,6 +283,7 @@ export default {
 			slideIndicatorCount,
 			slideIndicatorListLength,
 			slides,
+			toggleAutoPlay,
 		};
 	},
 };

package/vue/KvVerticalCarousel.vue

@@ -107,6 +107,22 @@ export default {
 			default: 'auto',
 			validator: (value) => ['visible', 'auto'].indexOf(value) !== -1,
 		},
+		/**
+		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
+		 * */
+		autoplayOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
+		 * */
+		fadeEnabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -120,6 +136,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			nextIndex,
 			onCarouselContainerClick,
 			previousIndex,
@@ -128,6 +145,7 @@ export default {
 			rootEl,
 			slideIndicatorCount,
 			slides,
+			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
 		return {
@@ -137,6 +155,7 @@ export default {
 			goToSlide,
 			handleUserInteraction,
 			isAriaHidden,
+			isAutoplaying,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,
@@ -147,6 +166,7 @@ export default {
 			rootEl,
 			slideIndicatorCount,
 			slides,
+			toggleAutoPlay,
 		};
 	},
 };

package/vue/stories/KvCarousel.stories.js

@@ -424,3 +424,81 @@ export const ThreeDimensional = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const AutoPlayAutomatically = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			style="max-width: 400px;"
+			:embla-options="{ loop: false }"
+			:autoplay-options="{ playOnInit: true, delay: 3000 }"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const AutoPlayButton = () => ({
+	components: {
+		KvCarousel,
+	},
+	data() {
+		return {
+			isPlaying: false,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@interact-carousel="carouselInteraction"
+			>
+				${defaultCarouselSlides}
+			</kv-carousel>
+			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<br/>
+			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+		</div>
+	`,
+	methods: {
+		toggleAutoPlay() {
+			this.$refs.sampleCarousel.toggleAutoPlay();
+		},
+		carouselInteraction() {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		},
+	},
+});
+
+export const Fade = () => ({
+	components: {
+		KvCarousel,
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:fade-enabled="true"
+			>
+				${defaultCarouselSlides}
+			</kv-carousel>
+		</div>
+	`,
+});

package/vue/stories/KvVerticalCarousel.stories.js

@@ -166,3 +166,81 @@ export const CustomStartIndex = () => ({
 		</kv-vertical-carousel>
 	`,
 });
+
+export const AutoPlayAutomatically = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	template: `
+		<kv-vertical-carousel
+			style="max-width: 400px;"
+			:embla-options="{ loop: false }"
+			:autoplay-options="{ playOnInit: true, delay: 3000 }"
+		>
+			${defaultCarouselSlides}
+		</kv-vertical-carousel>
+	`,
+});
+
+export const AutoPlayButton = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	data() {
+		return {
+			isPlaying: false,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@interact-carousel="carouselInteraction"
+			>
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<br/>
+			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+		</div>
+	`,
+	methods: {
+		toggleAutoPlay() {
+			this.$refs.sampleCarousel.toggleAutoPlay();
+		},
+		carouselInteraction() {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		},
+	},
+});
+
+export const Fade = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		});
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:fade-enabled="true"
+			>
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+		</div>
+	`,
+});