Carousel Layout Transformer

Date: 10. Oct 2016

With the releases of MatchPoint Snow 1.0.11 and 2.0.1 we introduced the Carousel Layout Transformer. This blog post describes the purpose and the functionality of it.

As all layout transformers the CarouselLayoutTransformer can be used within a CompositeConfiguration. It provides the possibility to display various content in a carousel such as important news, announcements or any other content provided by any DataProvider. It allows to display information in an attractive way without taking up a lot of space. It is possible to use automatic or manual paging mode to switch between items displayed in carousel.

Carousel with Dots navigation:

Carousel with Arrows navigation:

Configuration Parameters

The following section describes the most important configuration parameters of the carousel layout transformer.

1. CarouselContainerHeight – Allows to set the height of carousel container.
2. NumberOfElements – Specifies the number of elements to be displayed per slide.
3. SpaceBetweenElements – Describes the space between the elements on a slide.
4. PagingInterval – An integer that specifies how many seconds a slide will be displayed before switching to next one. If set to 0, no automatic switching will occur and the user can navigate manually by using one of the two navigation modes.
5. NavigationMode – There are two navigation modes which can be used to navigate between slides: Dots and Arrows
   • Dots are displayed below the carousel and indicate which slide is currently visible. By clicking on a Dot the carousel will slide to the selected slide.
   • Arrows are displayed on left and right side of carousel and can be used to navigate one slide further or one slide back.
6. AnimationEasing – Specifies easing used in the animation. There are five modes: linear, swing, easeInCubic, easeOutCubic and easeInOutCubic.
7. AnimationSpeed – Allows you to set the speed of the animation in seconds. Note: If you set PagingInterval to a value different than 0, the AnimationSpeed must be lower than that!
8. CarouselTemplate - Specifies how carousel elements looks like. You can write HTML by your self or use an ItemTemplate
9. Template - Here you can write the "container" for your carousel which is rendered initially. Basically this should at least be a HTML element (div, span, etc.) which uses the selector defined in the RootElementSelector. But you can also add a header, footer or whatever content you like here. The carousel content (CarouselTemplate) is later "injected" into the element with JavaScript
10. RootElementSelector - This is the jQuery/CSS selector of the HTML element where the carousel (CarouselTemplate) should be injected.