mendix · DiljohnSingh · Jun 3, 2026 · Sep 9, 2026 · Sep 9, 2026 · Sep 9, 2026
@@ -6,6 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We updated swiper library dependency to v14.2
+
+### Added
+
+- We added the option to configure number of slides per view (slides visible at the same time on slider's container) - contribution of @DiljohnSingh
+- We added the option to configure the numbers of slides for group sliding. Useful to use with slidesPerView > 1 - contribution of @DiljohnSingh.
+
+### Fixed
+
+- We fixed design preview not showing proper editable content height for widget dropzone area.
+
 ## [2.3.2] - 2026-04-13
 
 ### Changed

@@ -44,7 +44,7 @@
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.5.1",
-        "swiper": "^12.1.2"
+        "swiper": "^14.2.0"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

@@ -1,27 +1,33 @@
+import classNames from "classnames";
 import { GUID } from "mendix";
 import { ReactElement } from "react";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { CarouselPreviewProps } from "../typings/CarouselProps";
 import { Carousel } from "./components/Carousel";
 
 export function getPreviewCss(): string {
-    return require("./ui/Carousel.scss");
+    return require("./ui/CarouselPreview.scss");
 }
 
 export function CarouselPreviewComponent(props: CarouselPreviewProps): ReactElement {
+    const hasDataSource = props.dataSource != null;
     return (
         <Carousel
             id={generateUUID().toString()}
-            className={props.className}
+            className={classNames(props.className, "widget-carousel-editor-preview")}
             navigation={props.navigation}
             pagination={props.showPagination}
             loop={false}
-            items={["1", "2", "3"].map(item => ({
+            items={["1", "2"].map(item => ({
                 id: item as GUID,
-                content: (
-                    <props.content.renderer caption={`Carousel item content ${item}`}>
-                        <div>{`Carousel item content ${item}`}</div>
+                content: hasDataSource ? (
+                    <props.content.renderer>
+                        <div className="carousel-item-content" />
                     </props.content.renderer>
+                ) : (
+                    <div className="carousel-item-content">
+                        <div className="carousel-item-content-text">{`[No datasource selected]`}</div>
+                    </div>
                 )
             }))}
         />

@@ -1,18 +1,40 @@
 import classNames from "classnames";
 import { GUID, ObjectItem, ValueStatus } from "mendix";
-import { ReactNode, useCallback, useId } from "react";
+import { ReactNode, useCallback, useId, useMemo } from "react";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { CarouselContainerProps } from "../typings/CarouselProps";
 import { Carousel as CarouselComponent } from "./components/Carousel";
-import "./ui/Carousel.scss";
+
 import loadingCircleSvg from "./ui/loading-circle.svg";
 
+import "./ui/Carousel.scss";
+
 export function Carousel(props: CarouselContainerProps): ReactNode {
-    const { showPagination, loop, tabIndex, navigation, animation, delay, autoplay } = props;
+    const {
+        showPagination,
+        loop,
+        tabIndex,
+        navigation,
+        animation,
+        delay,
+        autoplay,
+        slidesPerView,
+        slidesPerGroup,
+        dataSource,
+        content
+    } = props;
     const onClick = useCallback(() => executeAction(props.onClickAction), [props.onClickAction]);
     const id = useId();
+    const carouselItems = useMemo(
+        () =>
+            dataSource?.items?.map((item: ObjectItem) => ({
+                id: item.id as GUID,
+                content: content?.get(item)
+            })) ?? [],
+        [dataSource]
+    );
 
-    if (props.dataSource?.status !== ValueStatus.Available) {
+    if (dataSource?.status !== ValueStatus.Available) {
         return (
             <div className={classNames(props.class, "widget-carousel")} tabIndex={tabIndex}>
                 <img src={loadingCircleSvg} className="widget-carousel-loading-spinner" alt="" aria-hidden />
@@ -27,16 +49,13 @@
             tabIndex={tabIndex}
             pagination={showPagination}
             loop={loop}
+            slidesPerView={slidesPerView}
+            slidesPerGroup={slidesPerGroup}
             animation={animation}
             autoplay={autoplay}
             delay={delay}
             navigation={navigation}
-            items={
-                props.dataSource?.items?.map((item: ObjectItem) => ({
-                    id: item.id as GUID,
-                    content: props.content?.get(item)
-                })) ?? []
-            }
+            items={carouselItems}
             onClick={onClick}
         />
     );

@@ -37,6 +37,14 @@
                     <caption>Infinite loop</caption>
                     <description />
                 </property>
+                <property key="slidesPerView" type="integer" defaultValue="1">
+                    <caption>Slides per view</caption>
+                    <description />
+                </property>
+                <property key="slidesPerGroup" type="integer" defaultValue="1">
+                    <caption>Slides per group</caption>
+                    <description />
+                </property>
                 <property key="animation" type="boolean" defaultValue="true">
                     <caption>Animation</caption>
                     <description />

@@ -19,6 +19,8 @@ export interface CarouselProps {
     animation?: boolean;
     autoplay?: boolean;
     delay?: number;
+    slidesPerView?: number;
+    slidesPerGroup?: number;
     navigation: boolean;
     className: string;
     tabIndex?: number | undefined;
@@ -27,7 +29,21 @@ export interface CarouselProps {
 }
 
 export function Carousel(props: CarouselProps): ReactElement {
-    const { items, pagination, loop, animation, autoplay, delay, navigation, className, tabIndex, id, onClick } = props;
+    const {
+        items,
+        pagination,
+        loop,
+        animation,
+        autoplay,
+        delay,
+        slidesPerView,
+        slidesPerGroup,
+        navigation,
+        className,
+        tabIndex,
+        id,
+        onClick
+    } = props;
     const [activeIndex, setActiveIndex] = useState<number>(0);
 
     const getSlideId = useCallback(
@@ -47,7 +63,8 @@ export function Carousel(props: CarouselProps): ReactElement {
     };
 
     const options: SwiperOptions = {
-        slidesPerView: 1,
+        slidesPerView,
+        slidesPerGroup,
         centeredSlides: true,
         loop,
         navigation,
@@ -76,9 +93,9 @@ export function Carousel(props: CarouselProps): ReactElement {
             <Swiper
                 onActiveIndexChange={updateSwiperIndex}
                 wrapperTag={"ul"}
-                {...options}
                 onClick={onClick}
                 onSwiper={updateSwiperIndex}
+                {...options}
             >
                 {items?.map((item, index) => (
                     <SwiperSlide tag={"li"} aria-hidden={index !== activeIndex} key={item.id} id={getSlideId(item)}>

@@ -156,13 +156,16 @@ describe("Carousel", () => {
         jest.resetAllMocks();
         jest.spyOn(Math, "random").mockReturnValue(0.123456789);
     });
+
     const defaultCarouselProps: CarouselProps = {
         id: "Carousel",
         className: "",
         items: [
             { id: "1" as GUID, content: <div>test1</div> },
             { id: "2" as GUID, content: <div>test2</div> }
         ],
+        slidesPerView: 1,
+        slidesPerGroup: 1,
         pagination: true,
         animation: true,
         autoplay: true,
@@ -177,21 +180,25 @@ describe("Carousel", () => {
 
         expect(asFragment()).toMatchSnapshot();
     });
+
     it("renders correctly without pagination", () => {
         const { asFragment } = render(<Carousel {...defaultCarouselProps} pagination={false} />);
 
         expect(asFragment()).toMatchSnapshot();
     });
+
     it("renders correctly without navigation", () => {
         const { asFragment } = render(<Carousel {...defaultCarouselProps} navigation={false} />);
 
         expect(asFragment()).toMatchSnapshot();
     });
+
     it("renders correctly with minimal setup", () => {
         const { asFragment } = render(<Carousel {...defaultCarouselProps} pagination={false} navigation={false} />);
 
         expect(asFragment()).toMatchSnapshot();
     });
+
     afterEach(() => {
         jest.restoreAllMocks();
     });

@@ -64,3 +64,7 @@ $focus-outline-offset: 2px !default;
         transform: rotate(360deg);
     }
 }
+
+ul.swiper-wrapper {
+    padding-inline-start: 0;
+}
@@ -0,0 +1,20 @@
+.widget-carousel-editor-preview {
+    .swiper-slide {
+        justify-content: flex-start;
+        min-height: 100px;
+        align-content: center;
+        align-items: center;
+
+        .carousel-item-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    ul.swiper-wrapper {
+        padding-inline-start: 0;
+    }
+}
@@ -18,6 +18,8 @@ export interface CarouselContainerProps {
     autoplay: boolean;
     delay: number;
     loop: boolean;
+    slidesPerView: number;
+    slidesPerGroup: number;
     animation: boolean;
     onClickAction?: ActionValue;
 }
@@ -40,6 +42,8 @@ export interface CarouselPreviewProps {
     autoplay: boolean;
     delay: number | null;
     loop: boolean;
+    slidesPerView: number | null;
+    slidesPerGroup: number | null;
     animation: boolean;
     onClickAction: {} | null;
 }