Merge pull request #38 from rtCamp/fix/carousel-loop-spacing

Author: danish17

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.0.1](https://github.com/rtCamp/carousel-system-interactivity-api/compare/1.0.0...1.0.1) (2026-02-16)
+
+### Bug Fixes
+
+* **carousel:** resolve spacing issues in loop mode where gaps were missing between last and first slide
+* **carousel:** allow infinite loop in editor viewport to match frontend behavior
+
 # 1.0.0 (2026-02-03)
 
 

examples/data/carousel-kit.xml

@@ -1,6 +1,6 @@
 {
-  "name": "carousel-kit",
-  "version": "1.0.0",
+  "name": "core-carousel",
+  "version": "1.0.1",
   "description": "Carousel block using Embla and WordPress Interactivity API",
   "author": "rtCamp",
   "private": true,

examples/data/core-carousel.xml

@@ -68,6 +68,7 @@ export default function Edit( {
 		className: 'carousel-kit',
 		dir: direction,
 		'data-axis': axis,
+		'data-loop': loop ? 'true' : undefined,
 		style: {
 			'--carousel-kit-gap': `${ attributes.slideGap }px`,
 			'--carousel-kit-height': axis === 'y' ? height : undefined,

package.json

@@ -59,6 +59,7 @@ export default function Save( {
 		'aria-label': ariaLabel,
 		dir: direction,
 		'data-axis': axis,
+		'data-loop': loop ? 'true' : undefined,
 		'data-wp-interactive': 'carousel-kit/carousel',
 		'data-wp-context': JSON.stringify( context ),
 		'data-wp-init': 'callbacks.initCarousel', // Use init for mounting

src/blocks/carousel/edit.tsx

@@ -17,7 +17,6 @@
 	margin: 0;
 	padding: 0;
 	list-style: none;
-	gap: 0;
 	grid-template-columns: none;
 	gap: var(--carousel-kit-gap, 0);
 }
@@ -38,11 +37,27 @@
 	min-width: 0;
 	box-sizing: border-box;
 
-	/* Reset vertical margins to align slides */
+	/* Reset margins by default (use gap instead) */
+	margin-inline-end: 0;
 	margin-block-start: 0;
 	margin-block-end: 0;
 }
 
+/**
+ * Fix for Embla Carousel Loop + Gap
+ * When looping is enabled, Embla v8 doesn't support CSS 'gap'.
+ * We switch to margin for consistent spacing in loop mode.
+ */
+:where(.core-carousel[data-loop="true"]) .embla__container,
+:where(.core-carousel[data-loop="true"]) .embla .wp-block-post-template {
+	gap: 0;
+}
+
+:where(.core-carousel[data-loop="true"]) .embla__slide,
+:where(.core-carousel[data-loop="true"]) .embla .wp-block-post-template li {
+	margin-inline-end: var(--core-carousel-gap, 0);
+}
+
 /* Vertical Axis adjustments */
 :where(.carousel-kit[data-axis="y"]) {
 	display: flex;
@@ -66,3 +81,9 @@
 	max-width: 100%;
 	margin-inline-end: 0;
 }
+
+/* Vertical + Loop specific */
+:where(.core-carousel[data-axis="y"][data-loop="true"]) .embla__slide,
+:where(.core-carousel[data-axis="y"][data-loop="true"]) .embla .wp-block-post-template li {
+	margin-block-end: var(--core-carousel-gap, 0);
+}

src/blocks/carousel/save.tsx

@@ -81,7 +81,7 @@ export default function Edit( {
 			const options = carouselOptions as any;
 
 			embla = EmblaCarousel( emblaRef.current!, {
-				loop: false,
+				loop: options?.loop ?? false,
 				dragFree: options?.dragFree ?? false,
 				containScroll: options?.containScroll || 'trimSnaps',
 				axis: options?.axis || 'x',