Multi Carousel / Slider

Content Type: Widget
Categories: User Interface,Data

Overview

Multi Carousel is a web widget for building static and dynamic content rotators. also, it could be used as a Slider.

Documentation

 

Multi Carousel / Slider

Multi Carousel is a web widget for building static and dynamic content rotators. also, it could be used as a Slider.

 

Features

  • Static or dynamic content.
  • Support adding action and auto-active items.
  • Auto Play.
  • Stop/Pause buttons.
  • Infinite loop.
  • Change loop direction.
  • Swipe to the card.
  • Touch and Drag support.
  • Stretch/unstretch the items to fill the available space.
  • Auto Height and Width.
  • Responsive design.
  • Styled control buttons.

 

Usage

1. Carousel type:

  • Normal Carousel: content rotators without an active card or built-in action support. However, you can add actions to the card manually from the content.
  •  

 

  • Carousel with Active Card: content rotators with active card and action support. the card will set active and its action will be fired on click the card.

Note: adding an action to the cards content (from Mendix properties) will override the method that handles setting the active card.

  •  

 

2. Slider

Only support for Dynamic data type, allowing users to slide the items using "left/right" buttons. the active card will be auto-set, and its action will be auto-fired.

 

 

Issues, suggestions

  1. The static data type doesn't support adding a built-in action, you can use the active carousel or the slider with static data by turning it to dynamic content.
  2. Adding an action to the card content in Carousel with Active Card type will override the method that handles setting the active card. if you wish to do that, use the Normal Carousel.
  3. Every carousel has an auto-generated unique class name starting with "-a". You can use it in case you have multiple carousels on the same page.
  4. For the Carousel with Active Card and the Slider, the widget will automatically slide to the first item, activate it, and fire its action.

 

Development and contribution

  1. $ cd [cloned widget folder]
  2. $ npm install
  3. $ npm run build
  4.  

UI (CSS classes)

 

1- Common classes:

// Active Item

.multi-carousel__active

// Extra Items

.multi-carousel__extra-item

// Loading

.multi-carousel__loading

// Error

.multi-carousel__error

// buttons style

.alice-carousel__prev-btn

.alice-carousel__prev-btn-item

// Dots

.alice-carousel__dots

.alice-carousel__dots-item

// Autoplay buttons

.alice-carousel__play-btn

.alice-carousel__play-btn-item

 

2- Normal carousel:

.normal-carousel__container

.normal-carousel__item

// The pre-styled buttons parent container

.normal-carousel__styled-btn

 

2- Active on click carousel:

.active-click-carousel__container

.active-click-carousel__item

// The pre-styled buttons parent container

.active-click-carousel__styled-btn

 

4- Active on slide carousel:

.active-slide-carousel__container

.active-slide-carousel__wrapper

.active-slide-carousel__prev-btn

.active-slide-carousel__next-btn

 

LinkedIn Aseel Dweedar

Releases

Version: 3.0.0
Framework Version: 9.0.5
Release Notes: - Added Static data type support. - Changed Properties order in the Mendix. The naming of the types in the widget.
Version: 2.0.0
Framework Version: 9.12.0
Release Notes: Added 1- Auto refresh the carousel when the data change -add/remove items-. 2- When the number of items is less than the required number for the screen, get the option of keeping the default behavior "stretch the items to fill the available space" or create extra empty items to prevent stretching. Changed 1- Remove the auto-calculating the numbers of items depending on the parent container width, and link it only with the screen size and user inputs. 2- return the button style to the default, and make the pre-style optional. Fixed 1- Fix the bug with the active-side carousel by calculating the position of the first and last item in some cases.
Version: 1.1.0
Framework Version: 9.12.0
Release Notes: - Add dynamic responsive object, so the user can control the number of items depending on screen size.
Version: 1.0.1
Framework Version: 9.12.0
Release Notes: - Active the first item and fire its action when resizing the active click carousel. - Active the first item and fire its action by default when initializing the active click/slide carousel. - Add class "multi-carousel__error" to manage Error messages. - Rearrange XML properties' order.
Version: 1.0.0
Framework Version: 9.12.0
Release Notes: v.1.0.0