[MGNLDEMO-93] Demo carousel Created: 28/Aug/15  Updated: 15/Apr/16  Resolved: 12/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: None
Fix Version/s: 0.8

Type: New Feature Priority: Major
Reporter: Christopher Zimmermann Assignee: Roman Kovařík
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1d 50m
Original Estimate: Not Specified

Issue Links:
dependency
depends upon MGNLDEMO-102 Ad-hoc Images in demo should be loade... Closed
is depended upon by MTE-51 Carousel Component Open
Template:
Acceptance criteria:
Empty
Date of First Response:
Epic Link: Travel Demo
Sprint: Kromeriz 14
Story Points: 5

 Description   

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:

description property name type default
Show dots dots checkbox true
Show arrows arrows checkbox true
Slides to show slidesToShow textfield (number) 1
Autoplay autoplay checkbox false
Autoplay - seconds per slide autoplay textfield (number) 5
Fade transition fade checkbox false
Variable slide width variableWidth checkbox false

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



 Comments   
Comment by Evzen Fochr [ 12/Oct/15 ]

Remove advanced setting for demo carousel.

Generated at Mon Feb 12 05:16:13 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.