Evaluators should see in the demo a generic carousel that they see how they could use in there own projects.
The carousel on the homepage is customized for the tour use-case. (Note that this is also useful in the demo because we want to illustrate how you can create the exact components you need for your project.)

Context: this component starts in the demo but will eventually be in a separate library of components - either in MTE or another "Extra Components" module.

As this component will eventually be in a module of components - it should ideally not be part of a bigger library like bootstrap of foundation. Because an implementor might choose one of those libraries for their project and it would be irritating and confusing to have another library in there just for one component.

Component should be a wrapper for the well regarded "slick" carousel: https://github.com/kenwheeler/slick/
Component should provide area accepting basic MTE components (html / textimage / teasers)

Demo CSS should be updated so that these items look good in carousel.

Carousel CSS and JS should be added to src/main/resources/travel-demo-theme/libs/slick-carousel
(JS after jquery)

PLUGIN CONFIGURATION

Dialog provides fields to configure:

Component should accept a string parameter "slickConfig" to specify the plugin configuration as a text string, ie:
infinite: true, speed: 300

The template should merge the definition parameter with the values from the dialog configuration. With the dialog overriding the definition parameter - and supply this to the plugin configuration via javascript- something like:

<div id="my-carousel-uuid">
<script>
$('#my-carousel-uuid').slick({
  dots: true,
  infinite: true
});
</script>

To support multiple instances on a page (with different configurations) - each instance should have a unique id.

USAGE IN DEMO

Carousel should be used on careers page before the "Current Openings" section. It should contain 5 TextImage components. 2 of which are shown at a time.
In the carousel - the textImage should render the text on top of the image.

The text for each item is just the location (stored in headline field). So the text of the components will be (with assets from dam)
US tours/flickr-grand-canyon-grand-canyon-national-park-12094069375_881928ee56_k
UAE tours/flickr_dubai_mattharvey1_16087410975_e8e0ce2de8_k
Hong Kong tours/flickr_indonesia_michael_day_2564067897_8d17df6972_b
Czech Republic tours/flickr_czech_Roman Boed_12033279054_fae78935fe_k
Switzerland tours/flickr-swiss-trails-ed-coyle-3797048134_1f4a930f48_o