diff --git a/packages/pluggableWidgets/carousel-web/CHANGELOG.md b/packages/pluggableWidgets/carousel-web/CHANGELOG.md index 446cd0d329..ff8d1c56e2 100644 --- a/packages/pluggableWidgets/carousel-web/CHANGELOG.md +++ b/packages/pluggableWidgets/carousel-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- Added focus indicator and background to navigation buttons of carousel, removed autoplay by default + ## [2.3.0] - 2025-08-19 ### Changed diff --git a/packages/pluggableWidgets/carousel-web/package.json b/packages/pluggableWidgets/carousel-web/package.json index d33019f96f..e5c24c49e0 100644 --- a/packages/pluggableWidgets/carousel-web/package.json +++ b/packages/pluggableWidgets/carousel-web/package.json @@ -1,7 +1,7 @@ { "name": "@mendix/carousel-web", "widgetName": "Carousel", - "version": "2.3.0", + "version": "2.3.1", "description": "Displays images in a carousel", "copyright": "© Mendix Technology BV 2025. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/carousel-web/src/Carousel.xml b/packages/pluggableWidgets/carousel-web/src/Carousel.xml index 53ee13cd3c..2db73936e0 100644 --- a/packages/pluggableWidgets/carousel-web/src/Carousel.xml +++ b/packages/pluggableWidgets/carousel-web/src/Carousel.xml @@ -25,7 +25,7 @@ Navigation controls - + Auto play diff --git a/packages/pluggableWidgets/carousel-web/src/package.xml b/packages/pluggableWidgets/carousel-web/src/package.xml index 124bce9c6f..916c59d476 100644 --- a/packages/pluggableWidgets/carousel-web/src/package.xml +++ b/packages/pluggableWidgets/carousel-web/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 0a2cc4c54e..33b22889ae 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -23,6 +23,20 @@ align-items: center; } +.swiper-button-next, +.swiper-button-prev { + --swiper-navigation-size: 24px; + border-radius: 50%; + background-color: rgba(245, 245, 245, 0.7); + padding: 2em; +} + +.swiper-button-next:focus, +.swiper-button-prev:focus { + outline: 2px solid #264ae5; + outline-offset: 2px; +} + .swiper-slide img { display: block; width: 100%;