Carousel Container

Content Type: Widget
Categories: Visualization

Overview

Carouselcontainer

A customizable Mendix pluggable widget that displays a responsive, animated carousel using Alice Carousel. It supports dynamic slide lists, custom widget content, autoplay, fade transitions, draggable navigation, arrows, dots, and more.

 

Features

Dynamic Slide List (add unlimited slides with caption + widget content)

 

✔ Supports all Mendix widgets inside slides

 

✔ Autoplay with configurable speed

 

✔ Fade or Slide animation

 

✔ Arrows & Dots toggle

 

✔ Draggable swipe navigation (mouse + touch)

 

✔ Infinite looping

 

✔ Smooth animation with configurable duration

 

✔ Responsive layout that adapts to screen size

 

✔ Clean & lightweight implementation using react-alice-carousel

Documentation

Typical Usage Scenario

The Carouselcontainer widget is ideal for displaying multiple pieces of content in a compact, interactive, and visually appealing format. It helps developers organize information into horizontal slides that users can navigate using swipe, arrows, or autoplay.

This widget is especially useful for:

  • Showcasing product images or media galleries
  • Displaying highlight cards, announcements, or feature lists
  • Creating responsive hero sections with rotating banners
  • Presenting dynamic dashboard items in a condensed space
  • Designing interactive UI sections without overwhelming the screen

By supporting dynamic slide lists, the widget allows developers to insert any Mendix widget into each slide, making it flexible for both simple and advanced content scenarios.

Features and Limitations

Features

  • Supports unlimited dynamic slides via Slide List configuration
  • Each slide can contain any Mendix widget (Text, Image, Container, Data Widgets, Layout, etc.)
  • Smooth animations using Alice Carousel
  • Customizable display options:
    • Arrows toggle
    • Dots/indicator toggle
    • Autoplay with speed control
    • Infinite looping
    • Fade animation mode
    • Animation duration control
    • Draggable (mouse + touch swipe)
  • Modern gradient styling and responsive behavior
  • Works seamlessly in Web and Responsive Web profiles
  • Lightweight and high-performance

Limitations

  • Vertical mode is not supported (AliceCarousel limitation)
  • Pause on hover and pause on dots hover are not available
  • Fade animation may reduce swipe responsiveness
  • Not designed for native mobile apps
  • Dynamic data source–based slide generation is not included in this version (planned)

Dependencies (optional)

This widget requires the following:

NPM Dependencies (bundled automatically)

  • react-alice-carousel
  • react and react-dom (included via Mendix framework)

Mendix Requirements

  • Mendix Studio Pro 9.0+
  • Web or Responsive Web application
  • Pluggable Widgets supported environment

No external services or APIs are required.

Installation (optional)

  1. Download the Carouselcontainer.mpk from the Mendix Marketplace.
  2. Open your Mendix project in Studio Pro.
  3. Drag and drop the MPK into the App Explorer under the project root.
  4. Mendix automatically places the widget under:
  5.  Project → Widgets
  6. Clean and Deploy the app to ensure the widget loads.

Configuration (optional)

  1. Drag Carouselcontainer into your page layout.
  2. Under Slides, click Add Item to create as many slides as needed.
  3. For each slide:
    • Set a Caption (optional)
    • Add any widget to the Content field
  4. Configure display options:
    • Enable/disable arrows or dots
    • Enable autoplay and adjust speed
    • Enable fade animation
    • Adjust animation duration
    • Enable draggable for swipe navigation
    • Toggle infinite loop
  5. Preview the result in the browser to fine-tune the animation and layout.

Known Bugs (optional)

  • Fade mode may occasionally cause minor flicker during fast slide transitions
  • Draggable interaction becomes less smooth when fade is enabled
  • Extremely large nested widgets inside slides may impact performance
  • In rare cases, autoplay timing can appear delayed if the main thread is busy
  • When used inside deeply nested conditional visibility containers, the carousel may need a refresh after DOM changes

Frequently Asked Questions (optional)

1. Can I dynamically generate slides from an entity list?

Not in this version. Currently slides are manually configured, but dynamic data-driven slides are planned for a future release.

2. Can I place any widget inside the slides?

Yes. Almost every Mendix widget is supported, including layout grids, images, text, buttons, and even custom widgets.

3. Does the widget support swipe gestures?

Yes. Touch and mouse drag navigation are supported when Draggable is enabled.

4. Does it work in Mobile or Native apps?

It works in Responsive Web on mobile browsers, but not in Native Mobile profiles.

5. Can I customize slide width or height?

Yes, using Mendix styling classes or custom CSS you attach to the widget.

Releases