@kiva/kv-components 3.77.0 → 3.78.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.78.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.77.0...@kiva/kv-components@3.78.0) (2024-05-15)
+
+
+### Features
+
+* start index added to kvcarousel component ([#398](https://github.com/kiva/kv-ui-elements/issues/398)) ([0477155](https://github.com/kiva/kv-ui-elements/commit/0477155d8bb02cce80777dbb3d2296b63d146ea8))
+
+
+
+
+
 # [3.77.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.76.0...@kiva/kv-components@3.77.0) (2024-05-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.77.0",
+  "version": "3.78.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "55a76b52fec99dd56e0f1203a6dd8dd2f0d25370"
+  "gitHead": "d2a856513aff1fdd814ad021bff7a4e64c408b8e"
 }

package/vue/KvCarousel.vue

@@ -146,7 +146,8 @@ export default {
 		const rootEl = ref(null);
 		const embla = ref(null);
 		const slides = ref([]);
-		const currentIndex = ref(0);
+		const startIndex = emblaOptions.value?.startIndex ?? 0;
+		const currentIndex = ref(startIndex);
 		// The indicator count may differ from the slide count when multiple slides are in view
 		const slideIndicatorCount = ref(0);
 

package/vue/stories/KvCarousel.stories.js

@@ -310,3 +310,46 @@ export const ResponsiveSlides = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const CustomStartIndex = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false, align: 'center', startIndex: 1 }"
+			:multiple-slides-visible="true"
+			slides-to-scroll="visible"
+			style="max-width: 1072px;"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				${generateLoanCardTemplate(2)}
+			</template>
+			<template #slide3>
+				${generateLoanCardTemplate(3)}
+			</template>
+			<template #slide4>
+				${generateLoanCardTemplate(4)}
+			</template>
+			<template #slide5>
+				${generateLoanCardTemplate(5)}
+			</template>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+			<template #slide9>
+				${generateLoanCardTemplate(9)}
+			</template>
+		</kv-carousel>
+	`,
+});