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