mendix · gjulivan · Aug 6, 2025
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We update swiper library dependency from v9 to v11.
+
 ## [2.2.1] - 2023-09-27
 
 ### Fixed

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/carousel-web",
     "widgetName": "Carousel",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "description": "Displays images in a carousel",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -44,7 +44,7 @@
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.5.1",
-        "swiper": "^9.4.1"
+        "swiper": "^11.2.10"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
@@ -53,10 +53,6 @@
         "@mendix/prettier-config-web-widgets": "workspace:*",
         "@mendix/run-e2e": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
-        "cross-env": "^7.0.3",
-        "mime-types": "^2.1.35",
-        "postcss": "^8.5.6",
-        "postcss-url": "^10.1.3",
-        "shelljs": "^0.8.5"
+        "cross-env": "^7.0.3"
     }
 }
@@ -1,46 +1,43 @@
-import { createElement, ReactNode, useCallback, ReactElement, useId } from "react";
-import { ValueStatus, GUID, ObjectItem } from "mendix";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import classNames from "classnames";
+import { GUID, ObjectItem, ValueStatus } from "mendix";
+import { createElement, ReactNode, useCallback, useId } from "react";
 import { CarouselContainerProps } from "../typings/CarouselProps";
 import { Carousel as CarouselComponent } from "./components/Carousel";
-import loadingCircleSvg from "./ui/loading-circle.svg";
-import classNames from "classnames";
 import "./ui/Carousel.scss";
+import loadingCircleSvg from "./ui/loading-circle.svg";
 
 export function Carousel(props: CarouselContainerProps): ReactNode {
     const { showPagination, loop, tabIndex, navigation, animation, delay, autoplay } = props;
     const onClick = useCallback(() => executeAction(props.onClickAction), [props.onClickAction]);
     const id = useId();
 
-    const renderCarousel = (): ReactElement => {
-        return (
-            <CarouselComponent
-                id={id}
-                className={props.class}
-                tabIndex={tabIndex}
-                pagination={showPagination}
-                loop={loop}
-                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)
-                    })) ?? []
-                }
-                onClick={onClick}
-            />
-        );
-    };
-    const renderLoading = (): ReactNode => {
+    if (props.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 />
             </div>
         );
-    };
+    }
 
-    return props.dataSource?.status !== ValueStatus.Available ? renderLoading() : renderCarousel();
+    return (
+        <CarouselComponent
+            id={id}
+            className={props.class}
+            tabIndex={tabIndex}
+            pagination={showPagination}
+            loop={loop}
+            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)
+                })) ?? []
+            }
+            onClick={onClick}
+        />
+    );
 }
@@ -1,9 +1,11 @@
 import { createElement, ReactNode, ReactElement, useCallback, useState } from "react";
 import { GUID } from "mendix";
 import classNames from "classnames";
-import { SwiperOptions, A11y, Navigation, Pagination, EffectFade, Autoplay } from "swiper";
-import { Swiper as ReactSwiper, SwiperClass, SwiperSlide } from "swiper/react";
-import { PaginationOptions } from "swiper/types";
+import { A11y, Navigation, Pagination, EffectFade, Autoplay } from "swiper/modules";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
+import { PaginationOptions, SwiperOptions } from "swiper/types";
+import "swiper/css";
+import "swiper/css/bundle";
 
 interface CarouselItem {
     id: GUID;
@@ -68,7 +70,7 @@ export function Carousel(props: CarouselProps): ReactElement {
 
     return (
         <div className={classNames(className, "widget-carousel")} tabIndex={tabIndex}>
-            <ReactSwiper
+            <Swiper
                 onActiveIndexChange={updateSwiperIndex}
                 wrapperTag={"ul"}
                 {...options}
@@ -80,7 +82,7 @@ export function Carousel(props: CarouselProps): ReactElement {
                         {item.content}
                     </SwiperSlide>
                 ))}
-            </ReactSwiper>
+            </Swiper>
         </div>
     );
 }
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Carousel" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Carousel" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Carousel.xml" />
         </widgetFiles>

@@ -1,6 +1,3 @@
-@use "~swiper/swiper";
-@use "~swiper/swiper-bundle.css";
-
 .swiper {
     width: 100%;
     height: 100%;