Demo Section

Each variation will be presented in the following section.

Timeline test

Timeline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. Test Links: Interner Link | Externer Link | Tel. | Download

2008

DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline

1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Mehr erfahren

2009

Einsame Welten in der LMU

2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Mehr erfahren

2010

3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

2012

4. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. Mehr erfahren

2014

5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Timeline

2008

DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline

1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Mehr erfahren

2009

Einsame Welten in der LMU

2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Mehr erfahren

2010

3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

2012

2014

5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Readme

timeline

Description

The component represents a simple but powerful timeline.

The timeline module is a component for cycling through elements, like a carousel or slideshow. It allows users to swipe on touch-enabled devices.

JIRA

LMU-76

Requirements

@veams/core - Veams Core Framework.
@veams/query or jquery - Veams Query or jQuery.
@veams/component - Veams Component.
@veams/helpers - Veams Detection Helpers.

Installation

Installation with Veams

veams install bp absolute/filepath/to/timeline


----------- 

## Fields

### `timeline.hbs`

The partial is a `{{#wrapWith}}` helper. Documentation for [wrapWith](https://github.com/Sebastian-Fitzner/mangony-hbs-helper-wrap-with) helper.

#### Settings

| Parameter | Type | Default | Description |
|:--- |:---:|:---: |:--- |
| settings.timelineContextClass | String | `'default'` | Context class of component |
| settings.timelineClasses | String | `''` | Modifier classes for component |
| settings.timelineJsOptions | Object | `null` | JavaScript options object which gets stringified in the markup |
| settings.timelineInnerFullWidth | Boolean | `false` | Delete the class `.is-container` from `.timeline__content` |
| settings.timelineHidePagination | Boolean | `false` | Hide the pagination when set to true |

### `timeline__controls.hbs`

#### Content

| Parameter | Type | Description |
|:--- |:---:|:--- |
| content.timelineButtons | Object | Contains the controls content. When the object is not defined, the controls will not be printed out |
| content.timelineButtons.prev | String | Define the button text for the previous button |
| content.timelineButtons.next | String | Define the button text for the next button |

### `timeline__list.hbs`

The partial is a `{{#wrapWith}}` helper. Documentation for [wrapWith](https://github.com/Sebastian-Fitzner/mangony-hbs-helper-wrap-with) helper.

#### Settings

| Parameter | Type | Default | Description |
|:--- |:---:|:---: |:--- |
| settings.timelineOverflow | Boolean | | Set this option to `true` if you want to add the class `.is-overflow` which gives you the possibility to show all hidden items next to the active element(s) |


### `timeline__item.hbs`

The partial is a `{{#wrapWith}}` helper. Documentation for [wrapWith](https://github.com/Sebastian-Fitzner/mangony-hbs-helper-wrap-with) helper.

### `timeline__image-description.hbs`

#### Content

| Parameter | Type | Description |
|:--- |:---:|:--- |
| content.text | String | Image description text |
| content.source | String | Image description source |
-------------

## JavaScript Options

The module gives you the possibility to override default options: 

| Option | Type | Default | Description |
|:--- |:---:|:---:|:--- |
| autoPlay | Boolean | `false` | Enable AutoPlay option of the timeline |
| autoPlayInterval | Number | `3000` | AutoPlay speed in milliseconds |
| classes.active | String | `'is-active'` | Class for the active slide |
| classes.cloneClass | String | `'is-cloned'` | For the infinite timeline the last and first element gets cloned. The cloning class can be overridden |
| classes.disabled | String | `'is-disabled'` | Class for disabled next/prev button |
| classes.hidden | String | `'is-hidden'` | The hidden class used by handling the visibility of the timeline |
| classes.paginationItem | String | `'timeline__pagination-list-item'` | Class which used in mini template |
| classes.sliding | String | `is-sliding` | Class to be set during slide animation |
| classes.unresolved | String | `is-unresolved` | Unresolved class which gets removed when initialized |
| counterRelationLabel | String | `'of'` | Define label for counter relation |
| disablePagination | Boolean | `false` | Disable pagination |
| enableTouchSwipe | Boolean | `true` | Enable support for swipe gestures on touch devices |
| groupPaginationItems | Boolean | `true` | Enable the grouping of pagination items |
| infinite | Boolean | `false` | The timeline will be set in infinite mode. Can not be used with multiple active slide items |
| pageScrollThreshold | Number | `30` | Threshold for vertical swipe in pixels |
| paginationItemClass | String | `'timeline__pagination-list-item'` | Class for the generated pagination item |
| paginationItemJsAtom | String | `'timeline-pagination-item'` | Data attribute for the generated pagination item |
| pauseOnHover | Boolean | `true` | When `autoplay` is set you can enable/disable pause on hover |
| selectors.counter | String | `'[data-js-item="timeline-counter"]'` | Define counter |
| selectors.imageDescription | String | `'[data-js-item="image-description"]'` | Define image description element |
| selectors.imageDescriptionWrapper | String | `'[data-js-item="image-description-wrapper"]'` | Define image description wrapper element |
| selectors.items | String | `'[data-js-item="timeline-item"]'` | Define the slide item element |
| selectors.next | String | `'[data-js-item="timeline-next"]'` | Define the next button element |
| selectors.prev | String | `'[data-js-item="timeline-prev"]'` | Define the prev button element |
| selectors.paginationList | String | `'[data-js-item="timeline-pagination-list"]'` | Define the pagination list element in which the pagination items are generated in |
| selectors.ribbon | String | `'[data-js-item="timeline-ribbon"]'` | Define the timeline ribbon which is holding all slides and gets the full width |
| selectors.wrapper | String | `'[data-js-item="timeline-wrapper"]'` | Define the timeline wrapper element |
| slideByItemNumber | Number | `false` | You can use the option to override the initial slide step which is the number of current visible items |
| startAtIndex | Number | `0` | Start index for the timeline |
| swipeThreshold | Number | `5` | Threshold for horizontal swipe in percent |
| visibleItems | Object | `{'mobile-s': 1, 'mobile-p': 1, 'tablet-p': 1, 'tablet-l': 1, 'desktop-m': 1, 'desktop-l': 1}` | Define how many slide items should be visible on different viewports |

------------

## Sass Options

There are multiple global variables which you can change: 

| Variable | Default | Description |
|:--- | :---: |:--- |
| $timeline-darken: | `10 !default` | Darken value for hover effects |
| $timeline-unresolved-height: | `300px !default` | Set a fix height when the timeline is in unresolved state |
| $timeline-duration: | ` 600ms !default` | Slide item animation duration |
| $timeline-ease-method: | `ease !default` | Slide item animation ease method |
| $timeline-control-bg-color: | `#a5cfd1 !default` | Background color of control buttons |
| $timeline-pagination-color: | `#555 !default` | Background color of pagination items |
| $timeline-pagination-color-active: | `$timeline-pagination-color !default` | Active vackground color of pagination items which gets darken by `$timeline-darken` |
| $timeline-pagination-size: | `15px !default` | Pagination size (width & height) |
| $timeline-pagination-border-radius: | `25% !default` | Border radius of pagination items |

Templates

timeline-usage.hbs

{{! wrapWith START: Timeline }}
{{#with @root.timeline.variations.default}}
	{{#wrapWith "timeline" settings=this.settings content=this.content}}
	{{! WrapWith START: timeline List }}
		{{#wrapWith "timeline__list" settings=this.settings}}

			{{#wrapWith "timeline__item"}}
				{{#deepMerge @root.timeline.variations.default.content.timelinePicture
				             with='{"settings": {"ariaDescribedBy": "image-description-1"}}' arrayMerge="extend"}}
					{{> picture }}
				{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "timeline__item"}}
				{{#deepMerge @root.timeline.variations.default.content.timelinePicture
				             with='{"settings": {"ariaDescribedBy": "image-description-2"}}' arrayMerge="extend"}}
					{{> picture }}
				{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "timeline__item"}}
				{{#deepMerge @root.timeline.variations.default.content.timelinePicture
				             with='{"settings": {"ariaDescribedBy": "image-description-3"}}' arrayMerge="extend"}}
					{{> picture }}
				{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "timeline__item"}}
				{{#deepMerge @root.timeline.variations.default.content.timelinePicture
				             with='{"settings": {"ariaDescribedBy": "image-description-4"}}' arrayMerge="extend"}}
					{{> picture }}
				{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "timeline__item"}}
				{{#deepMerge @root.timeline.variations.default.content.timelinePicture
				             with='{"settings": {"ariaDescribedBy": "image-description-5"}}' arrayMerge="extend"}}
					{{> picture }}
				{{/deepMerge}}
			{{/wrapWith}}

		{{/wrapWith}}
	{{! WrapWith END: timeline List }}
	{{/wrapWith}}
{{/with}}
{{! wrapWith END: timeline}}

timeline.hbs

<div class="c-timeline{{#if
		options.settings.timelineContextClass}}--{{options.settings.timelineContextClass}}{{else}}--default{{/if}}{{#if
		options.settings.timelineClasses}} {{options.settings.timelineClasses}}{{/if}}"
     data-css="c-timeline"
     data-js-module="timeline"{{#if options.settings.timelineJsOptions}}
     data-js-options='{{stringify options.settings.timelineJsOptions}}'{{/if}}>
			{{#if options.content.headline}}
				<h2 class="timeline__headline">{{options.content.headline}}</h2>
			{{/if}}

			{{#if options.content.introText}}
				<p class="timeline__intro-text">{{options.content.introText}} Test Links: <a href="#test" class="is-internal">Interner Link</a> | <a href="#test2" class="is-external">Externer Link</a> | <a href="#Telephone" class="is-phone">Tel.</a> | <a href="is-download">Download</a></p>
			{{/if}}

			<div class="timeline__content{{#unless options.settings.timelineInnerFullWidth}} is-container{{/unless}}">
				<div class="timeline__slider">
					{{{yield}}}
				</div>

				{{#if options.content.timelineImageDescription}}
					<div class="timeline__image-description-wrapper" data-js-item="image-description-wrapper">
				{{/if}}

				{{#each options.content.timelineImageDescription}}
					{{> timeline__image-description }}
				{{/each}}

				{{#if options.content.timelineImageDescription}}
					</div>
				{{/if}}

			</div>

			{{#unless options.settings.timelineHidePagination}}
				<div class="timeline__pagination-wrapper">
					{{> timeline__pagination }}
				</div>
			{{/unless}}

			<div class="timeline__counter-controls-panel">
				{{#with options.content.timelineButtons}}
					<div class="timeline__controls-wrapper">
						{{> timeline__controls }}
					</div>
				{{/with}}
				{{#if options.settings.timelineShowCounter}}
					<div class="timeline__counter" data-js-item="timeline-counter"></div>
					<div class="timeline__dateline" data-js-item="timeline-dateline" {{#if options.settings.timelineDatelineStandardDistanceSize}}data-js-distance-size="{{options.settings.timelineDatelineStandardDistanceSize}}"{{/if}}>
						<div class="timeline__dateline-area">
							<div class="timeline__dateline-wrapper" data-js-item="timeline-dateline-wrapper">
								<ol class="timeline__dateline-date-wrapper">
									{{#each options.content.timelineImageDescription}}
										{{> timeline__line-date }}
									{{/each}}
								</ol>
								<span class="timeline__dateline-filledLine" data-js-item="timeline-dateline-filledLine" aria-hidden="true"></span>
							</div>
						</div>
					</div>
				{{/if}}
			</div>
</div>

timeline__controls.hbs

<button type="button" class="timeline__control is-previous" data-js-item="timeline-prev">
	{{prev}}
</button>
<button type="button" class="timeline__control is-next" data-js-item="timeline-next">
	{{next}}
</button>

timeline__item.hbs

<li class="timeline__item" data-js-item="timeline-item">
	{{{yield}}}
</li>

timeline__list.hbs

<div class="timeline__list-wrapper{{#if options.settings.timelineOverflow}} is-overflow{{/if}}" data-js-item="timeline-wrapper">
	<ol class="timeline__list" data-js-item="timeline-ribbon">
		{{{yield}}}
	</ol>
</div>

timeline__pagination.hbs

<ol class="timeline__pagination-list" data-js-item="timeline-pagination-list">
</ol>

timeline__line-date.hbs

<li class="timeline__dateline-item">
	<button class="timeline__dateline-date-button{{#if @first}} is-activedate{{else}} is-newdate{{/if}}" style="left:{{settings.datelineposition}}px;" data-js-item="timeline__dateline-date-button" data-js-id="{{settings.id}}" data-index="{{@index}}" data-js-position="{{settings.datelineposition}}"><span class="timeline__event-date">{{content.date}}</span></button>
</li>

Data File

timeline.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Timeline test"
			},
			"settings": {
				"timelineContextClass": "default",
				"timelineClasses": "is-unresolved",
				"timelineHidePagination": true,
				"timelineShowCounter": true,
				"timelineJsOptions": {
					"counterRelationLabel": "von"
				}
			},
			"content": {
				"headline": "Timeline",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"timelinePicture": {
					"settings": {
						"pictureContextClass": "timeline-lpage",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/400x267",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x800",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1000",
										"imageWidth": "2000w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "100vw"
									}
								],
								"media": "(min-width: 1024px)"
							},
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x267",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x534",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x801",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1068",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1335",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1602",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1868",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x2135",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
									}
								],
								"media": "(max-width: 1023px)"
							}
						]
					}
				},
				"timelineButtons": {
					"next": "Nächstes",
					"prev": "Vorheriges"
				},
				"timelineImageDescription": [
					{
						"settings": {
							"id": "image-description-1",
							"datelineposition": "100"
						},
						"content": {
							"date": "2008",
							"headline": "DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline",
							"text": "1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-2",
							"datelineposition": "290"
						},
						"content": {
							"date": "2009",
							"headline": "Einsame Welten in der LMU",
							"text": "2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-3",
							"datelineposition": "480"
						},
						"content": {
							"date": "2010",
							"text": "3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-4",
							"datelineposition": "590"
						},
						"content": {
							"date": "2012",
							"text": "4. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-5",
							"datelineposition": "760"
						},
						"content": {
							"date": "2014",
							"text": "5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"source": "©2018 imageworks"
						}
					}
				]
			}
		},
		"rte": {
			"docs": {
				"variationName": "Timeline"
			},
			"settings": {
				"timelineContextClass": "rte",
				"timelineClasses": "is-unresolved is-rte-embed",
				"timelineHidePagination": true,
				"timelineShowCounter": true,
				"timelineJsOptions": {
					"counterRelationLabel": "von"
				}
			},
			"content": {
				"headline": "Timeline test",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"timelinePicture": {
					"settings": {
						"pictureContextClass": "timeline",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/400x267",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x267",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x534",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x801",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1068",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1335",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1602",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1868",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x2135",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "100vw"
									}
								],
								"media": "min-width: 1024px"
							},
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x267",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x534",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x801",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1068",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1335",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1602",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1868",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x2135",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
									}
								],
								"media": "max-width: 1023px"
							}
						]
					}
				},
				"timelineButtons": {
					"next": "Nächstes",
					"prev": "Vorheriges"
				}
				"timelineImageDescription": [
					{
						"settings": {
							"id": "image-description-1",
							"datelineposition": "100"
						},
						"content": {
							"date": "2008",
							"headline": "DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline",
							"text": "1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-2",
							"datelineposition": "200"
						},
						"content": {
							"date": "2009",
							"headline": "Einsame Welten in der LMU",
							"text": "2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-3",
							"datelineposition": "300"
						},
						"content": {
							"date": "2010",
							"text": "3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-4",
							"datelineposition": "350"
						},
						"content": {
							"date": "2012",
							"text": "4. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
							"link": {
								"href": "#",
								"text": "Mehr erfahren"
							},
							"source": "©2018 imageworks"
						}
					},
					{
						"settings": {
							"id": "image-description-5",
							"datelineposition": "400"
						},
						"content": {
							"date": "2014",
							"text": "5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"source": "©2018 imageworks"
						}
					}
				]
			}
		}
	}
}

Styles

_timeline.scss

/* ===================================================
timeline Module
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
// General
$timeline-darken: 10 !default;
$timeline-unresolved-height: 300px !default;
// Animation Variables
$timeline-duration: 600ms !default;
$timeline-ease-method: ease !default;
// Controls
$timeline-control-bg-color: #a5cfd1 !default;
// Pagination
$timeline-pagination-color: #555 !default;
$timeline-pagination-color-active: $timeline-control-bg-color !default;
$timeline-pagination-size: 15px !default;
$timeline-pagination-border-radius: 25% !default;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */

[data-js-module~="timeline"] {
	clear: both;
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	/*
	Unresolved state
	----------------------- */
	&.is-unresolved {

		.timeline__list {
			height: $timeline-unresolved-height;
			overflow: hidden;
		}

		.timeline__item {
			opacity: 0;
		}
	}

	.timeline__headline {
		@include headline-h2-styles();
	}

	.timeline__intro-text {
		font-family: $font-regular;
		font-size: 1.6rem;
		line-height: (22/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 25px;
	}

	/*
	List
	----------------------- */
	.timeline__list-wrapper {
		display: block;
		position: relative;
		overflow: hidden;

		&.is-overflow {
			overflow: visible;
		}
	}

	.timeline__list {
		left: 0;
		position: relative;
		transform: translate3d(0, 0, 0);
		transition: transform $timeline-duration $timeline-ease-method;
		margin-left: 0;
	}

	.timeline__item {
		@include float();

		position: relative;
		opacity: .3;
		transition: opacity $timeline-duration $timeline-ease-method;
		vertical-align: top;
		line-height: 0;
		background-color: $color-light;
		list-style-type: none;
		padding-left: 0;
		margin-left: 0;

		&.is-active {
			opacity: 1;
		}
	}

	/*
	Actions
	----------------------- */
	.timeline__controls-wrapper {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		float: right;
		text-align: right;
		width: 109px;
		word-spacing: -2px;

		@include bp(410px) {
			word-spacing: -3px;
		}

		@include bp($bp-desktop-m) {
			width: 121px;
		}

		@include hcm() {
			width: 199px;
		}

		.timeline__control {
			@include reset-btn();
			@include hidden-text();

			position: relative;
			background-color: $color-dark;
			width: 50px;
			height: 50px;
			border: 1px solid transparent;
			transition: border-color $animation-duration-std $animation-easing-std,
				background-color $animation-duration-std $animation-easing-std;

			@include bp($bp-tablet-p) {
				width: 54px;
				height: 54px;
			}

			@include bp($bp-desktop-m) {
				width: 60px;
				height: 60px;
			}

			@include hcm() {
				font-family: $font-regular;
				width: auto;
				color: initial;
				font-size: 1.6rem;
				border-color: $color-black;
				padding: 0 10px;
			}

			&:hover:not(.is-disabled) {
				cursor: pointer;
				background-color: $color-white;
				border-color: $color-green;

				&::before {
					@include sprites-icon-arrow-green100();

					transform: translate(calc(-50% + 5px), -50%);
				}

				&.is-previous {

					&::before {
						transform: translate(calc(-50% - 5px), -50%) rotate(180deg);
					}
				}
			}

			&::before {
				@include pseudo();
				@include centering();
				@include sprites-icon-arrow-white();

				transition: transform $animation-duration-std $animation-easing-std;

				@include print() {
					background-image: none;
				}

			}

			&.is-disabled {
				opacity: .1;
				cursor: not-allowed;
			}

			&.is-previous {
				left: 0;

				&::before {
					transform: translate(-50%, -50%) rotate(180deg);
				}
			}

			&.is-next {
				right: 0;
			}
		}

		.touch & {

			.timeline__control {
				border: none;
				&:hover:not(.is-disabled) {
					background-color: $color-dark;
					border: none;

					&::before {
						@include sprites-icon-arrow-white();

						transform: translate(-50%, -50%);
					}

					&.is-previous {

						&::before {
							transform: translate(-50%, -50%) rotate(180deg);
						}
					}
				}

				&::before {
					@include sprites-icon-arrow-white();
				}
			}


			@include bp($bp-tablet-l + 1) {
				display: block;
			}
		}
	}



	/*
	Pagination
	----------------------- */
	.timeline__pagination-wrapper {
		@include centering(h);

		bottom: $timeline-pagination-size;
	}

	.timeline__pagination-list {
		margin: 0;
		padding: 0;
	}

	.timeline__pagination-list-item {
		@extend %hidden-text;

		background-color: $timeline-pagination-color;
		border-radius: $timeline-pagination-border-radius;
		display: inline-block;
		height: $timeline-pagination-size;
		margin: 0 $timeline-pagination-size/3;
		width: $timeline-pagination-size;
		transition: background-color $timeline-duration/4 $timeline-ease-method;

		&:hover {
			cursor: pointer;
			background-color: darken(
				$timeline-pagination-color,
				$timeline-darken
			);
		}

		&.is-active {
			background-color: $timeline-pagination-color-active;
		}

		&.is-hidden {
			display: none;
		}
	}

	.timeline__counter {
		display: inline-block;
		line-height: 60px;
		font-size: 1.2rem;
		@include bp($bp-tablet-p) {
			display: none;
		}
		@include hcm() {
			display: inline-block;
		}
	}

	.timeline__counter-index {
		font-family: $font-bold;
	}

	.timeline__image-description-wrapper {
		position: relative;
		height: auto;
		overflow: hidden;
		transition: height $animation-duration-std $animation-easing-std;
		background: $color-dark;
		@include bp($bp-tablet-p) {
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(10, 10, 10, .7);
		}
		@include hcm() {
			position: relative;
			background: rgb(10, 10, 10);
			border: 1px solid $color-white;
		}

		@include print() {
			border: 1px solid $color-gray-border !important;
		}
	}

	.timeline__image-description {
		position: absolute;
		font-size: 1.2rem;
		line-height: (17/12);
		opacity: 0;
		transition: opacity $animation-duration-std $animation-easing-std;
		padding: 10px 27px 12px;
		display: block;

		@include print() {
			display: none;
		}

		&.is-active {
			opacity: 1;
			z-index: 200;

			@include print() {
				display: block;
			}
		}

		&:hover {

			.timeline__image-description-text-link {

				&::before {
					@include sprites-icon-arrow-green100();
					transform: translateX(5px);
				}
			}
			.timeline__image-description-link {
			color: $color-green;
			}
		}
	}

	.timeline__image-description-headline {
		padding: 4px 0;
		font-family: $font-bold;
		font-size: 1.8rem;
		line-height: (24/18);
		letter-spacing: .25px;
		color: $color-white;
		@include bp($bp-tablet-p) {
			padding: 15px 0 10px;
		}
	}

	.timeline__image-description-date {
		font-family: $font-bold;
		font-size: 3rem;
		line-height: (40/30);
		letter-spacing: -.52px;
		color: $color-white;
	}

	.timeline__image-description-source,
	.timeline__image-description-text-wrapper {
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .23px;
		color: $color-white;
	}

	.timeline__image-description-text-area {
		padding-bottom: 10px;
	}

	.timeline__image-description-text-content {
		display: none;
		@include bp($bp-tablet-p) {
			display: inline;
		}
	}

	.timeline__image-description-link {
		display: block;
		text-decoration: none;
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .23px;
		color: $color-white;
		font-family: $font-bold;

		&.a11y-focus-key {
			color: $color-white;
		}
	}

	.timeline__image-description-text-link {
		font-size: 1.5rem;
		line-height: (24/15);
		letter-spacing: .28px;
		-webkit-transition: color 100ms ease-in-out;
		transition: color 100ms ease-in-out;
		position: relative;
		padding-left: 30px;
		display: inline-block;
		@include print() {
			padding-left: 0;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-green;

			&::before {
				@include sprites-icon-arrow-green100();
				transform: translateX(5px);
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-white();
			position: absolute;
			display: inline-block;
			top: 4px;
			left: 5px;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;
			@include print() {
				display: none;
			}
		}

		/* MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			@include a11y-focus-key();
		}
	}

	.timeline__a11y-clickarea {
		@include clickarea();
		z-index: 3;
	}

	.timeline__dateline {
		position: relative;
		max-width: 1300px;
		margin: 0 auto;
		display: none;
		@include bp($bp-tablet-p) {
			display: block;
			height: 54px;
			margin-right: 110px;
		}
		@include bp($bp-desktop-m) {
			height: 60px;
			margin-right: 122px;
		}
		@include hcm() {
			display: none;
		}
	}

	.timeline__dateline-area {
		position: relative;
		height: 100%;
		margin: 0;
		overflow: hidden;
		background: $color-white;
		@include bp($bp-desktop-m) {
			margin: 0 8px 0 4px;
		}
	}

	.timeline__dateline-wrapper {
		width: 4000px;
		transform: translateX(0);
		position: absolute;
		z-index: 1;
		left: 0;
		top: 24px;
		height: 2px;
		background: $color-gray-light;
		transition: transform .4s;
		vertical-align: baseline;
		@include hcm() {
			background: $color-white;
		}
	}

	.timeline__dateline-date-wrapper {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.timeline__dateline-date-wrapper .timeline__dateline-item {
		float: left;
	}

	.timeline__dateline-date-button {
		font-family: $font-bold;
		font-size: 1.5rem;
		line-height: (25/15);
		position: absolute;
		top: -6px;
		z-index: 2;
		text-align: center;
		padding-top: 16px;
		color: $color-dark;
		text-decoration: none;
		border: none;
		background-color: transparent;
		cursor: pointer;

		&:hover,
		&.a11y-focus-key {

			&.is-olderdate::before,
			&.is-newdate::before {
				background-color: $color-green;
				border-color: $color-green;
			}

			.timeline__event-date {
				color: $color-dark;
			}
		}

		&::before {
			content: "";
			position: absolute;
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			top: 0;
			height: 12px;
			width: 12px;
			border: 1px solid $color-black;
			background-color: $color-white;

			/* -webkit-transition: background-color .2s,border-color .2s;
			-moz-transition: background-color .2s,border-color .2s;
			transition: background-color .2s,border-color .2s; */
			outline-width: 5px;
			outline-style: solid;
			outline-color: $color-white;
		}

		&.is-olderdate::before {
			border-color: $color-black;
			background-color: $color-black;
		}

		&.is-activedate {
			pointer-events: none;

			&::before {
				background-color: $color-green;
				border-color: $color-green;
			}

			.timeline__event-date {
				color: $color-dark;
			}
		}

		.timeline__event-date {
			color: transparent;
		}
	}

	.timeline__dateline-filledLine {
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		height: 100%;
		background-color: $color-green;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-timeline--default {

	.timeline__headline,
	.timeline__intro-text,
	.timeline__image-description-wrapper,
	.timeline__slider,
	.timeline__counter-controls-panel {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
		@include bp($bp-tablet-l) {
			@include grid-column-width(10);
			@include grid-push-h(1);
		}
		@include bp($bp-desktop-l) {
			@include grid-column-width(8);
			@include grid-push-h(2);
		}
	}

	.timeline__intro-text {

		/*
		Links
		----------------------------- */
		a {
			@include content-a-styles();

		}

	}

	.timeline__content {
		width: 100%;
		position: relative;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-timeline--lpage {

	.timeline__headline,
	.timeline__intro-text,
	.timeline__image-description-wrapper,
	.timeline__slider,
	.timeline__counter-controls-panel {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}

	.timeline__intro-text {

		/*
		Links
		----------------------------- */
		a {
			@include content-a-styles();

		}

	}

	.timeline__content {
		width: 100%;
		position: relative;
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-timeline--rte {

	/* MODIFIERS
	----------------------- */
	&.is-rte-embed {
		margin-bottom: 60px;
	}

	.grid__row {
		max-width: none;
	}

	.timeline__headline,
	.timeline__intro-text,
	.timeline__image-description-wrapper,
	.timeline__pagination-wrapper,
	.timeline__slider,
	.timeline__counter-controls-panel {
		@include rte-dimensions();
	}

	.timeline__content {
		width: 100%;
		position: relative;
	}

	.timeline__image-description-text-content {
		font-weight: normal;
	}

	.timeline__list {
		margin-bottom: 0;
	}

	li.timeline__item,
	li.timeline__dateline-item {
		margin-bottom: 0;
		margin-top:0;
		overflow: visible;
		list-style: none;

		&::before {
			left: 0;
			content: "";
			color: transparent;
		}
	}

}

Scripts

timeline.js

/**
 * Represents a responsive Timeline which can be used as ribbon.
 *
 * @module Timeline
 * @version v1.0.0
 *
 * @author Sebastian Fitzner
 * @author Andy Gutsche
 * @author Ralf Arnert
 */
import $ from 'jquery';
import Component from '@veams/component';
import transitionEndEvent from '@veams/helpers/lib/detection/transition-end-event';
import getComputedTranslate from '../../../utilities/helpers/get-computed-translate';

class Timeline extends Component {
	/**
	 * General Properties
	 */

	// Elements in Markup
	$el = $(this.el);
	$prev = this.$el.find(this.options.selectors.prev);
	$next = this.$el.find(this.options.selectors.next);
	$items = this.$el.find(this.options.selectors.items);
	$initialItems = this.$items;
	$wrapper = this.$el.find(this.options.selectors.wrapper);
	$ribbon = this.$el.find(this.options.selectors.ribbon);
	$lastItem = this.$items.eq(this.$items.length - 1);
	$firstItem = this.$items.eq(0);
	$counter = this.$el.find(this.options.selectors.counter);
	$imageDescriptionWrapper = this.$el.find(this.options.selectors.imageDescriptionWrapper);
	$imageDescription = this.$imageDescriptionWrapper.find(this.options.selectors.imageDescription);
	$initialImageDescription = this.$imageDescription;
	$imageDescriptionLink = this.$imageDescriptionWrapper.find(
		this.options.selectors.imageDescriptionLink
	);
	$lastimageDescription = this.$imageDescription.eq(this.$imageDescription.length - 1);
	$firstimageDescription = this.$imageDescription.eq(0);
	imageDescriptionHeights = [];
	imageDescriptionIds = [];
	$datelineButtons = this.$el.find(this.options.selectors.datelinedatebutton);
	$datelineArea = this.$el.find(this.options.selectors.dateline);
	$datelineElement = this.$el.find(this.options.selectors.datelinewrapper);
	$datelineFilled = this.$el.find(this.options.selectors.datelinefilledline);

	// Transition
	transition = this.$ribbon.css('transition');

	// Pagination
	paginationDisabled = this.options.disablePagination || this.$items.length < 2;
	paginationItemSel = '[data-js-item="' + this.options.paginationItemJsItem + '"]';
	infinite = this.options.infinite && this.$items.length > 1;
	touchSwipeEnabled = false;
	clickHandler = true;
	_index = this.options.startAtIndex || 0;
	_autoPlay = this.options.autoPlay && this.infinite;

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			classes: {
				active: 'is-active', // Active class for slides and pagination items
				cloned: 'is-cloned', // Clone class for cloned items (only used with infinite)
				disabled: 'is-disabled', // Disabled class for next/prev button
				hidden: 'is-hidden', // hidden class for pagination
				paginationItem: 'timeline__pagination-list-item', // Define your class which we use in our mini tmpl
				sliding: 'is-sliding', // Class to be set during slide animation
				unresolved: 'is-unresolved', // Unresolved class which gets removed when initialized
				activedate: 'is-activedate', // Active class for dateline
				olderdate: 'is-olderdate', // Older date class for dateline
				newdate: 'is-newdate' // Future date class for dateline
			},
			autoPlay: false, // Enable AutoPlay
			autoPlayInterval: 3000, // AutoPlay interval in milliseconds
			counterRelationLabel: 'of', // Label for counter relation
			disablePagination: false, // Disable pagination display
			enableTouchSwipe: false, // Enable/Disable swipe support
			groupPaginationItems: false, // Group the pagination elements (useful for multiple visible items)
			infinite: false, // Infinite looping (only possible without multiple visible items)
			pageScrollThreshold: 30, // Threshold for vertical swipe in pixels
			paginationItemJsItem: 'timeline-pagination-item', // data-js-item for pagination list item
			pauseOnHover: true, // Used when options.autoPlay is true
			selectors: {
				counter: '[data-js-item="timeline-counter"]',
				imageDescription: '[data-js-item="image-description"]', // Image description
				imageDescriptionLink: '[data-js-item="image-description-link"]', // Image description links
				imageDescriptionWrapper: '[data-js-item="image-description-wrapper"]', // Image description wrapper
				items: '[data-js-item="timeline-item"]', // Slide Items
				next: '[data-js-item="timeline-next"]', // Next Button
				prev: '[data-js-item="timeline-prev"]', // Previous Button
				paginationList: '[data-js-item="timeline-pagination-list"]', // Pagination List
				ribbon: '[data-js-item="timeline-ribbon"]', // Ribbon element
				wrapper: '[data-js-item="timeline-wrapper"]',
				datelinedatebutton: '[data-js-item="timeline__dateline-date-button"]', // Every Date-Element in the timeline
				dateline: '[data-js-item="timeline-dateline"]', //Area with a fix width and height in which the timeline-Element are positioned
				datelinewrapper: '[data-js-item="timeline-dateline-wrapper"]', //Area with a fix width and height with all the date-elements posiditioned in it. (Position absolute in the timeline-dateline)
				datelinefilledline: '[data-js-item="timeline-dateline-filledLine"]' // Span-Element to fill the timeline with color
			},
			activeDateInLine: {}, // Object with informations about the active Date in the timeline
			slideByItemNumber: false, // Use the option to override the initial slide step
			startAtIndex: 0, // Start at a different index
			swipeThreshold: 10, // Threshold for horizontal swipe in percent

			visibleItems: {
				// Visible items per viewport
				'mobile-s': 1,
				'mobile-p': 1,
				'tablet-p': 1,
				'tablet-l': 1,
				'desktop-m': 1,
				'desktop-l': 1
			}
		};

		super(obj, options);
	}

	/**
	 * Custom getters and setter
	 */

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0',
			vc: true,
			mod: false
		};
	}

	/**
	 * Get and set visible items.
	 *
	 * @param {number} visible - Number of visible items
	 */
	get visibles() {
		return this._numVisible;
	}

	set visibles(visible) {
		this._numVisible = visible;
	}

	/**
	 * Get and set items length for slider.
	 *
	 * @param {number} len - Number of item length
	 */
	get itemsLength() {
		return this._itemLength;
	}

	set itemsLength(len) {
		this._itemLength = len;
	}

	/**
	 * Get and set the index of slider.
	 *
	 * @param {number} idx - index number of slide
	 */
	get index() {
		return this._index;
	}

	set index(idx) {
		this._index = idx;
	}

	/**
	 * Get paused property.
	 *
	 * @param {Boolean} bool - pause state
	 */
	get paused() {
		return this._paused;
	}

	set paused(bool) {
		this._paused = bool;
	}

	/**
	 * Get autoPlay property.
	 *
	 * @param {Boolean} bool - autoplay state
	 */
	get autoPlay() {
		return this._autoPlay;
	}

	set autoPlay(bool) {
		this._autoPlay = bool;
	}

	/**
	 * Get controls height.
	 */
	get controlHeight() {
		return this.$prev.outerHeight();
	}

	/**
	 * Return the defined option or current visible items
	 * which will be used for the next and previous slide animation.
	 */
	get slideBy() {
		return this.options.slideByItemNumber || this.visibles;
	}

	/**
	 * Get ribbon width.
	 */
	get ribbonWidth() {
		return ((this.$items.length * this.thumbWidth) + 1);
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */

	/**
	 * Bind local events to this.$el.
	 */
	get events() {
		return {
			'click {{this.options.selectors.prev}}': 'showPrevElement',
			'touchstart {{this.options.selectors.prev}}': 'showPrevElement',
			'click {{this.options.selectors.next}}': 'showNextElement',
			'touchstart {{this.options.selectors.next}}': 'showNextElement',
			'click {{this.paginationItemSel}}': 'navigateToElement',
			'touchstart {{this.paginationItemSel}}': 'navigateToElement',
			'click {{this.options.selectors.datelinedatebutton}}': 'navigateToElement',
			'touchstart {{this.options.selectors.datelinedatebutton}}': 'navigateToElement'
		};
	}

	/**
	 * Subscribe to global events of Veams or App namespace.
	 */
	get subscribe() {
		return {
			'{{context.EVENTS.resize}}': 'render'
		};
	}

	/**
	 * Bind all events
	 */
	bindEvents() {
		if (this.autoPlay && this.options.pauseOnHover) {
			this.registerEvent('{{context.EVENTS.mouseenter}}', 'pause');
			this.registerEvent('{{context.EVENTS.mouseleave}}', 'play');
		}
	}

	/**
	 * Unbind all events
	 */
	unbindEvents() {
		// Global Events
		this.context.Vent.off(this.context.EVENTS.resize);

		// Local Events
		this.$el.off(this.context.clickHandler);
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	didMount() {
		if (!this.paginationDisabled) {
			this.$paginationList = this.$el.find(this.options.selectors.paginationList);
		}

		if (this.options.autoPlay && !this.infinite) {
			console.warn(
				'Timeline: Sorry - option "autoPlay" has no effect while option "infinite" is set to false!'
			);
		}

		if (this.infinite) {
			for (let item in this.options.visibleItems) {
				if (this.options.visibleItems.hasOwnProperty(item)) {
					if (this.options.visibleItems[item] > 1) {
						console.warn(
							'Timeline: Sorry - option "visibleItems" has no effect while option "infinite" is set to true!'
						);
						break;
					}
				}
			}
		}
	}

	/**
	 * Renders the view's template to the UI
	 */
	render() {
		if (!this.context.currentMedia) {
			console.warn(
				'Timeline: this.context.currentMedia is necessary to support the slider module!'
			);
			return;
		}

		if (this.$clonedLast && this.$clonedFirst) {
			this.$clonedLast.remove();
			this.$clonedFirst.remove();
			this.$clonedImgDscLast.remove();
			this.$clonedImgDscFirst.remove();
			this.$items = this.$initialItems;
			this.$imageDescription = this.$initialImageDescription;
		}

		this.visibles = this.infinite ? 1 : this.options.visibleItems[this.context.currentMedia];
		this.itemsLength = this.$items.length;

		this.handleVisibility();

		if (!this.paginationDisabled) {
			this.removePagination();
			this.addPagination();
		}

		if (this.infinite) {
			this.infiniteLoop();
			this.index = this.index === 0 ? this.index + this.visibles : this.index;
		}

		this.bindTransitions();
		this.getAndSetDimensions();

		if (
			this.context.detections.touch &&
			this.options.enableTouchSwipe &&
			!this.touchSwipeEnabled
		) {
			this.bindSwipes();
		}

		this.goToItem(this.index);

		if (this.autoPlay && this.paused) {
			this.play();
		}

		this.$imageDescription.eq(this.index).addClass(this.options.classes.active);
		this.$imageDescription
			.eq(this.index)
			.find('[data-js-item="image-description-link"]')
			.removeAttr('tabindex');

		this.getImageDescriptionHeightsAndId();

		this.handleTimeline(this.index);

		this.$imageDescriptionWrapper.css(
			'height',
			this.imageDescriptionHeights[this.index] + 'px'
		);
	}

	/** =================================================
	 * CUSTOM SLIDER METHODS
	 * ================================================= */

	/**
	 * Bind transition events
	 *
	 */
	bindTransitions() {
		let onRibbonTransitionEnd = this.onRibbonTransitionEnd.bind(this);
		let onItemsTransitionEnd = this.onItemsTransitionEnd.bind(this);

		this.$ribbon.on(transitionEndEvent(), onRibbonTransitionEnd);
		this.$items.on(transitionEndEvent(), onItemsTransitionEnd);
	}

	/**
	 * React to transitionend on ribbon
	 *
	 * @param {Object} e - Event object.
	 */
	onRibbonTransitionEnd(e) {
		e.stopPropagation();

		this.$el.removeClass(this.options.classes.sliding);

		this.handleTimeline(this.index);

		if (this.autoPlay && this.paused) {
			if (this.options.pauseOnHover) {
				if (!this.$el.is(':hover')) {
					this.play();
				}
			} else {
				this.play();
			}
		}

		if (this.$clonedFirst && this.$clonedFirst.hasClass(this.options.classes.active)) {
			this.$clonedFirst.removeClass(this.options.classes.active);
			this.index = 1;

			console.info('cloned first aktiv' + this.index);

			this.animateSlide({
				idx: this.index,
				animate: false
			});
		}

		if (this.$clonedLast && this.$clonedLast.hasClass(this.options.classes.active)) {
			this.$clonedLast.removeClass(this.options.classes.active);
			this.index = this.$items.length - this.visibles - 1;

			console.info('cloned last aktiv' + this.index);

			this.animateSlide({
				idx: this.index,
				animate: false
			});
		}

		this.$imageDescriptionLink.removeAttr('tabindex');
		this.$imageDescriptionLink.attr('tabindex', '-1');
		this.$imageDescription.eq(this.index).addClass(this.options.classes.active);
		this.$imageDescription
			.eq(this.index)
			.find('[data-js-item="image-description-link"]')
			.removeAttr('tabindex');

		this.clickHandler = true;
	}

	/**
	 * React to transitionend on items
	 *
	 * @param {Object} e - Event object.
	 */
	onItemsTransitionEnd(e) {
		e.stopPropagation();
	}

	/**
	 * Get heights of all image descriptions
	 *
	 */
	getImageDescriptionHeightsAndId() {
		let i = 0;

		this.imageDescriptionHeights = [];
		this.imageDescriptionIds = [];

		for (i; i < this.$imageDescription.length; i++) {
			this.imageDescriptionHeights.push(this.$imageDescription.eq(i).outerHeight());
			this.imageDescriptionIds.push(this.$imageDescription.eq(i).attr('data-js-id'));
		}
	}

	/**
	 * Set the timeline for the navigation
	 *
	 */
	handleTimeline(timelineId) {
		let count_new = 0;
		let i = 0;
		this.getTimelineAreaWith = this.$datelineArea.eq(0).outerWidth();
		let lastDateLeftPosition = 0;

		for (i; i < this.$datelineButtons.length; i++) {
			this.$datelineButtons.eq(i).removeClass(this.options.classes.activedate);
			this.$datelineButtons.eq(i).removeClass(this.options.classes.olderdate);
			this.$datelineButtons.eq(i).removeClass(this.options.classes.newdate);
			if (
				this.imageDescriptionIds[timelineId] ==
				this.$datelineButtons.eq(i).attr('data-js-id')
			) {
				count_new = 1;
				this.activeDateInLine = {
					id: this.$datelineButtons.eq(i).attr('data-js-id'),
					leftPosition: parseFloat(this.$datelineButtons.eq(i).attr('data-js-position'))
				};
				this.$datelineButtons.eq(i).addClass(this.options.classes.activedate);
			} else if (count_new == 1) {
				this.$datelineButtons.eq(i).addClass(this.options.classes.newdate);
			} else {
				this.$datelineButtons.eq(i).addClass(this.options.classes.olderdate);
			}
			if (
				parseFloat(this.$datelineButtons.eq(i).attr('data-js-position')) >
				lastDateLeftPosition
			) {
				lastDateLeftPosition = parseFloat(
					this.$datelineButtons.eq(i).attr('data-js-position')
				);
			}
		}

		//console.info(this.activeDateInLine.id + '--' + this.activeDateInLine.leftPosition);

		this.getTimelineAreaWith = parseFloat(this.$datelineArea.eq(0).outerWidth());
		if (this.getTimelineAreaWith > 300 && lastDateLeftPosition > this.getTimelineAreaWith) {
			let halfTimeLineWidth = this.getTimelineAreaWith / 2;
			if (this.activeDateInLine.leftPosition > halfTimeLineWidth) {
				//console.info();
				let TimeLineMoveLeft = halfTimeLineWidth - this.activeDateInLine.leftPosition;
				this.$datelineElement.eq(0).css('left', TimeLineMoveLeft + 'px');
			} else {
				if (this.$datelineElement.eq(0).css('left') !== 0) {
					this.$datelineElement.eq(0).css('left', '0px');
				}
			}
		}
		let lengthTimelinefilled = this.activeDateInLine.leftPosition + 16;
		this.$datelineFilled.eq(0).css('width', lengthTimelinefilled + 'px');
		//console.info(this.getTimelineWith);
	}

	/**
	 * Clone first and last element
	 *
	 */
	infiniteLoop() {
		this.$clonedFirst = this.$firstItem.clone(true).addClass(this.options.classes.cloned);
		this.$clonedLast = this.$lastItem.clone(true).addClass(this.options.classes.cloned);
		this.$clonedImgDscFirst = this.$firstimageDescription
			.clone(true)
			.addClass(this.options.classes.cloned);
		this.$clonedImgDscLast = this.$lastimageDescription
			.clone(true)
			.addClass(this.options.classes.cloned);

		if (this.options.infinite) {
			this.$clonedFirst.find(this.paginationItemSel).attr('data-index', this.itemsLength);
			this.$clonedLast.find(this.paginationItemSel).attr('data-index', -1);
		}

		this.$firstItem.before(this.$clonedLast);
		this.$lastItem.after(this.$clonedFirst);
		this.$firstimageDescription.before(this.$clonedImgDscLast);
		this.$lastimageDescription.after(this.$clonedImgDscFirst);

		this.$items = $(this.options.selectors.items, this.$el);
		this.$imageDescription = $(this.options.selectors.imageDescription, this.$el);
	}

	/**
	 * Animate slide
	 *
	 * @param {Object} obj - animation property object.
	 */
	animateSlide(obj) {
		if (!obj.animate) {
			this.$ribbon.css('transition', 'none');
		} else {
			if (obj.idx !== obj.prevIdx) {
				this.$el.addClass(this.options.classes.sliding);
			}

			this.$ribbon.css('transition', this.transition);
		}

		if (obj.idx !== obj.prevIdx) {
			console.info('remove aktiv from Cescription');
			this.$imageDescription.removeClass(this.options.classes.active);
		}

		this.$ribbon.css('transform', 'translate3d(' + -obj.idx * this.thumbWidth + 'px, 0, 0)');
	}

	/**
	 * Check first/last slide classes
	 *
	 */
	checkSlides() {
		if (this.$clonedFirst.hasClass(this.options.classes.active)) {
			this.$firstItem.addClass(this.options.classes.active);
			this.$firstimageDescription.addClass(this.options.classes.active);
		}
		if (this.$clonedLast.hasClass(this.options.classes.active)) {
			this.$lastItem.addClass(this.options.classes.active);
			this.$lastimageDescription.addClass(this.options.classes.active);
		}
	}

	/**
	 * When items length is 0 we hide this view.
	 */
	handleVisibility() {
		if (this.itemsLength === 0) {
			this.$el.addClass(this.options.classes.hidden);
			console.warn('Timeline: There is no item we can use in our slider :(');
		}

		this.$el.css('max-width', 'none');
	}

	/**
	 * Empty pagination.
	 */
	removePagination() {
		this.$paginationList.empty();
	}

	/**
	 * Add pagination elements with a simple string template and
	 * save a pagination item reference.
	 */
	addPagination() {
		let tmpl = '';
		let i = 0;
		let item = this.options.paginationItemJsItem;
		let itemClass = this.options.classes.paginationItem;

		for (i; i < this.$items.length; i++) {
			let idx = i + 1;
			let hiddenClass = '';

			if (this.options.groupPaginationItems) {
				hiddenClass = i % this.visibles === 0 ? '' : this.options.classes.hidden;
			}

			tmpl += `
					<li class="${itemClass} ${hiddenClass}" data-js-item="${item}" data-index="${i}">
						<strong>${idx}</strong>
					</li>
					`;
		}

		this.$paginationList.append(tmpl);
		this.$paginationItems = $(
			'[data-js-item="' + this.options.paginationItemJsItem + '"]',
			this.$el
		);
	}

	/**
	 * Navigate to a specific slide.
	 *
	 * @param {object} e - Event object.
	 * @param {object} currentTarget - Target to which listener was attached.
	 */
	navigateToElement(e, currentTarget) {
		e.preventDefault();
		let $currentTarget = $(currentTarget);

		if ($currentTarget.hasClass(this.options.classes.active)) {
			return;
		}

		let idx = parseInt($currentTarget.attr('data-index'), 10) || $currentTarget.index();

		if (this.infinite) {
			idx = idx + this.slideBy;
		}

		this.goToItem(idx);
	}

	/**
	 * Go to the next slide.
	 *
	 * @param {object} e - Event object.
	 * @param {object} currentTarget - Target to which listener was attached.
	 */
	showNextElement(e, currentTarget) {
		const $currentTarget = $(currentTarget);

		if (e && typeof e.preventDefault === 'function') {
			e.preventDefault();
		}

		if ($currentTarget.prop('disabled')) {
			return;
		}

		if (this.clickHandler) {
			this.goToItem(this.index + this.slideBy);
			this.clickHandler = false;
		}
	}

	/**
	 * Go to the previous slide.
	 *
	 * @param {object} e - Event object.
	 * @param {object} currentTarget - Target to which listener was attached.
	 */
	showPrevElement(e, currentTarget) {
		const $currentTarget = $(currentTarget);

		if (e && typeof e.preventDefault === 'function') {
			e.preventDefault();
		}

		if ($currentTarget.prop('disabled')) {
			return;
		}

		if (this.clickHandler) {
			this.goToItem(this.index - this.slideBy);
			this.clickHandler = false;
		}
	}

	/**
	 * Return the direction `next` or `prev`.
	 *
	 * @param {number} index - Index of the pagination element.
	 */
	getDirection(index) {
		return index > this.index ? 'next' : 'prev';
	}

	/**
	 * Bind all swipe gestures.
	 */
	bindSwipes() {
		this.registerEvent(
			'{{context.EVENTS.touchstart}} {{this.options.selectors.ribbon}}',
			'startDrag'
		);
	}

	/**
	 * Drag handler for preview controller and map
	 *
	 * @param {Object} e - Event object for 'touchstart' events
	 * @param {Object} e - Event object for 'touchstart' events
	 */
	startDrag(e, currentTarget) {
		let elem = currentTarget;
		let $elem = $(elem);
		let deltaX = 0;
		let deltaY = 0;

		// save initial values (including current x and y offset values)
		let dragStartValues = {
			elemX: elem.offsetLeft + getComputedTranslate(elem, 'x'),
			pageX: e.touches[0].pageX,
			pageY: e.touches[0].pageY
		};

		// on 'touchmove'
		$elem.on(this.context.EVENTS.touchmove, e => {
			// get delta compared to initial values
			let dragValues = Timeline.getDragValues(e, dragStartValues);

			deltaX = dragValues.deltaX;
			deltaY = dragValues.deltaY;

			if (Math.abs(deltaY) <= this.options.pageScrollThreshold) {
				this.translateRibbon(dragValues.x);
			}
		});

		// if user stops touching stop tracking of touch movement
		$(window).on(this.context.EVENTS.touchend, () => {
			$(window).off(this.context.EVENTS.touchend);
			$elem.off(this.context.EVENTS.touchmove);

			// if drag delta for x < threshold snap back
			if (
				Math.abs(deltaX) <= this.$el.outerWidth() * (this.options.swipeThreshold / 100) ||
				Math.abs(deltaY) > this.options.pageScrollThreshold
			) {
				this.goToItem(this.index);

				return;
			}

			e.preventDefault();

			// swipe right
			if (deltaX > 0) {
				// if not first item goto previous otherwise snap back
				if (this.index > 0) {
					this.goToItem(this.index - 1);
				} else {
					this.goToItem(this.index);
				}
			}

			// swipe left
			if (deltaX < 0) {
				// if not last item goto next otherwise snap back
				if (this.index < this.$items.length - 1) {
					this.goToItem(this.index + 1);
				} else {
				}
				this.goToItem(this.index);
			}
		});
	}

	/**
	 * Calculate and return delta values between initial values and current values
	 *
	 * @param {Object} e - Event object for 'touchstart' events
	 * @param {Object} dragStartValues - Object containing initial values
	 *
	 * @return {Object} - Delta values and new x-value
	 */
	static getDragValues(e, dragStartValues) {
		let deltaX = e.touches[0].pageX - dragStartValues.pageX;
		let deltaY = e.touches[0].pageY - dragStartValues.pageY;

		return {
			x: dragStartValues.elemX + deltaX,
			deltaX: deltaX,
			deltaY: deltaY
		};
	}

	/**
	 * Translate ribbon on swipe
	 *
	 * @param {Number} x - New translate value for x-axis
	 */
	translateRibbon(x) {
		this.$ribbon.css({
			transform: 'translate3d(' + x + 'px, 0, 0)',
			transition: 'none'
		});
	}

	/**
	 * Enables button
	 *
	 * @param {Object} $btn - button element.
	 */
	enableBtn($btn) {
		$btn.removeClass(this.options.classes.disabled);
		$btn.prop('disabled', false);
		$btn.removeAttr('aria-disabled');
	}

	/**
	 * Disables button
	 *
	 * @param {Object} $btn - button element.
	 */
	disableBtn($btn) {
		$btn.addClass(this.options.classes.disabled);
		$btn.prop('disabled', true);
		$btn.attr('aria-disabled', true);
	}

	/**
	 * Handles the method to go to a specific item.
	 * Further we handle the class
	 *
	 * @param {number} i - Index number.
	 */
	goToItem(i) {
		let maxIndex = this.$items.length - this.visibles;

		if (maxIndex < 0) {
			maxIndex = 0;
		}

		if (!this.paused) {
			this.pause();
		}

		if (this.infinite) {
			if (i < 0) {
				i = maxIndex;
			} else if (i > maxIndex) {
				i = 0;
			}
		} else {
			this.enableBtn(this.$prev);
			this.enableBtn(this.$next);

			if (i < 1) {
				this.disableBtn(this.$prev);

				if (i < 0) {
					i = 0;
				}
			}

			if (i > maxIndex - 1) {
				this.disableBtn(this.$next);

				if (i > maxIndex) {
					i = maxIndex;
				}
			}
		}

		let prevIdx = this.index;
		this.index = i;

		this.animateSlide({
			animate: !this.$el.hasClass(this.options.classes.unresolved),
			idx: i,
			prevIdx: prevIdx
		});

		if (this.$el.hasClass(this.options.classes.unresolved)) {
			this.$el.removeClass(this.options.classes.unresolved);
		}

		this.handleActivity();

		if (this.infinite) {
			this.checkSlides();
		}
	}

	/**
	 * Handle activity.
	 */
	handleActivity() {
		this.$items.removeClass(this.options.classes.active);
		this.$items.removeAttr('aria-hidden');
		this.$items.attr('aria-hidden', 'true');

		this.$imageDescriptionWrapper.css(
			'height',
			this.imageDescriptionHeights[this.index] + 'px'
		);

		if (!this.paginationDisabled && this.$paginationItems && this.$paginationItems.length) {
			this.$paginationItems.removeClass(this.options.classes.active);
		}

		let counterTmpl = `<span class="timeline__counter-index">${this.index +
			1}</span> <span class="timeline__counter-relation-label">${
			this.options.counterRelationLabel
		}</span> <span class="timeline__counter-total">${this.$items.length}</span>`;

		this.$counter.html(counterTmpl);

		// If this timeline instance isn't infinite
		if (!this.infinite) {
			for (let idx = this.index; idx < this.index + this.visibles; idx++) {
				// First set active slide element(s)
				this.$items.eq(idx).addClass(this.options.classes.active);
				this.$items.eq(idx).removeAttr('aria-hidden');

				// Do that also for pagination element(s)
				if (!this.paginationDisabled) {
					this.$paginationItems.eq(idx).addClass(this.options.classes.active);
				}
			}
		} else {
			for (let idx = this.index - 1; idx < this.index - 1 + this.visibles; idx++) {
				let slideIdx = idx;
				this.$items.eq(slideIdx + 1).addClass(this.options.classes.active);
				this.$items.eq(slideIdx + 1).removeAttr('aria-hidden');

				if (!this.paginationDisabled) {
					if (idx >= this.$paginationItems.length) {
						slideIdx = 0;
					}

					if (idx < 0) {
						slideIdx = this.$paginationItems.length - 1;
					}

					this.$paginationItems.eq(slideIdx).addClass(this.options.classes.active);
				}
			}
		}
	}

	/**
	 * Start autoplay.
	 */
	play() {
		clearInterval(this.autoPlayInterval);

		this.autoPlayInterval = setInterval(() => {
			this.goToItem(this.index + this.visibles);
		}, this.options.autoPlayInterval);

		this.paused = false;
	}

	/**
	 * Pause autoplay.
	 */
	pause() {
		clearInterval(this.autoPlayInterval);
		this.paused = true;
	}

	/**
	 * Get and set dimensions for our project progress.
	 */
	getAndSetDimensions() {
		this.resetStyles();
		this.width = this.$wrapper.outerWidth();
		this.thumbWidth = this.width / this.visibles;

		this.$wrapper.css('width', this.width + 'px');
		this.$items.css('width', this.thumbWidth + 'px');

		this.$ribbon.css({
			width: this.ribbonWidth + 'px'
		});
	}

	/**
	 * Reset width styles
	 */
	resetStyles() {
		this.$wrapper[0].removeAttribute('style');
		this.$items.removeAttr('style');
		this.$ribbon.removeAttr('style');
	}
}

export default Timeline;

HTML Output

Timeline test

<div class="c-timeline--default is-unresolved" data-css="c-timeline" data-js-module="timeline" data-js-options='{&quot;counterRelationLabel&quot;:&quot;von&quot;}'>
	<h2 class="timeline__headline">Timeline</h2>
	<p class="timeline__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. Test Links: <a href="#test" class="is-internal">Interner Link</a> | <a href="#test2" class="is-external">Externer Link</a> | <a href="#Telephone" class="is-phone">Tel.</a> | <a href="is-download">Download</a></p>
	<div class="timeline__content is-container">
		<div class="timeline__slider">
			<div class="timeline__list-wrapper" data-js-item="timeline-wrapper">
				<ol class="timeline__list" data-js-item="timeline-ribbon">
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-1" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-2" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-3" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-4" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-5" />
						</picture>
					</li>
				</ol>
			</div>
		</div>
		<div class="timeline__image-description-wrapper" data-js-item="image-description-wrapper">
			<div data-js-id="image-description-1" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2008</p>
				</div>
				<div class="timeline__image-description-headline">
					<p>DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline</p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-2" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2009</p>
				</div>
				<div class="timeline__image-description-headline">
					<p>Einsame Welten in der LMU</p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-3" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2010</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
			</div>
			<div data-js-id="image-description-4" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2012</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">4. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-5" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2014</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
			</div>
		</div>
	</div>
	<div class="timeline__counter-controls-panel">
		<div class="timeline__controls-wrapper">
			<button type="button" class="timeline__control is-previous" data-js-item="timeline-prev">
				Vorheriges
			</button>
			<button type="button" class="timeline__control is-next" data-js-item="timeline-next">
				Nächstes
			</button>
		</div>
		<div class="timeline__counter" data-js-item="timeline-counter"></div>
		<div class="timeline__dateline" data-js-item="timeline-dateline">
			<div class="timeline__dateline-area">
				<div class="timeline__dateline-wrapper" data-js-item="timeline-dateline-wrapper">
					<ol class="timeline__dateline-date-wrapper">
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-activedate" style="left:100px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-1" data-index="0" data-js-position="100"><span class="timeline__event-date">2008</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:290px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-2" data-index="1" data-js-position="290"><span class="timeline__event-date">2009</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:480px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-3" data-index="2" data-js-position="480"><span class="timeline__event-date">2010</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:590px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-4" data-index="3" data-js-position="590"><span class="timeline__event-date">2012</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:760px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-5" data-index="4" data-js-position="760"><span class="timeline__event-date">2014</span></button>
						</li>
					</ol>
					<span class="timeline__dateline-filledLine" data-js-item="timeline-dateline-filledLine" aria-hidden="true"></span>
				</div>
			</div>
		</div>
	</div>
</div>

Timeline

<div class="c-timeline--default is-unresolved" data-css="c-timeline" data-js-module="timeline" data-js-options='{&quot;counterRelationLabel&quot;:&quot;von&quot;}'>
	<h2 class="timeline__headline">Timeline</h2>
	<p class="timeline__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. Test Links: <a href="#test" class="is-internal">Interner Link</a> | <a href="#test2" class="is-external">Externer Link</a> | <a href="#Telephone" class="is-phone">Tel.</a> | <a href="is-download">Download</a></p>
	<div class="timeline__content is-container">
		<div class="timeline__slider">
			<div class="timeline__list-wrapper" data-js-item="timeline-wrapper">
				<ol class="timeline__list" data-js-item="timeline-ribbon">
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-1" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-2" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-3" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-4" />
						</picture>
					</li>
					<li class="timeline__item" data-js-item="timeline-item">
						<picture class="c-picture--timeline-lpage
						" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source srcset="
						 https://via.placeholder.com/400x200  400w  , 
						 https://via.placeholder.com/800x400  800w  , 
						 https://via.placeholder.com/1200x600  1200w  , 
						 https://via.placeholder.com/1600x800  1600w  , 
						 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
						  (min-width: 1440px) 1440px 
						  ,   100vw " media=" (min-width: 1024px)" />
							<source srcset="
						 https://via.placeholder.com/400x267  400w  , 
						 https://via.placeholder.com/800x534  800w  , 
						 https://via.placeholder.com/1200x801  1200w  , 
						 https://via.placeholder.com/1600x1068  1600w  , 
						 https://via.placeholder.com/2000x1335  2000w  , 
						 https://via.placeholder.com/2400x1602  2400w  , 
						 https://via.placeholder.com/2800x1868  2800w  , 
						 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
						   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
						 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-5" />
						</picture>
					</li>
				</ol>
			</div>
		</div>
		<div class="timeline__image-description-wrapper" data-js-item="image-description-wrapper">
			<div data-js-id="image-description-1" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2008</p>
				</div>
				<div class="timeline__image-description-headline">
					<p>DIe Entdeckung des Hibernating Stellar Magnet zweizweilige Headline</p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-2" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2009</p>
				</div>
				<div class="timeline__image-description-headline">
					<p>Einsame Welten in der LMU</p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">2. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-3" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2010</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
			</div>
			<div data-js-id="image-description-4" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2012</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">4. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</span>
						<span class="timeline__image-description-text-link">
							<a class="timeline__image-description-link" data-js-item="image-description-link" href="#" tabindex="-1">
								Mehr erfahren
							</a>
						</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
				<a class="timeline__a11y-clickarea" aria-hidden="true" tabindex="-1" href="#"></a>
			</div>
			<div data-js-id="image-description-5" class="timeline__image-description" data-js-item="image-description">
				<div class="timeline__image-description-date">
					<p>2014</p>
				</div>
				<div class="timeline__image-description-headline">
					<p></p>
				</div>
				<div class="timeline__image-description-text-wrapper">
					<p class="timeline__image-description-text-area">
						<span class="timeline__image-description-text-content">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
					</p>
				</div>
				<div class="timeline__image-description-source">©2018 imageworks</div>
			</div>
		</div>
	</div>
	<div class="timeline__counter-controls-panel">
		<div class="timeline__controls-wrapper">
			<button type="button" class="timeline__control is-previous" data-js-item="timeline-prev">
				Vorheriges
			</button>
			<button type="button" class="timeline__control is-next" data-js-item="timeline-next">
				Nächstes
			</button>
		</div>
		<div class="timeline__counter" data-js-item="timeline-counter"></div>
		<div class="timeline__dateline" data-js-item="timeline-dateline">
			<div class="timeline__dateline-area">
				<div class="timeline__dateline-wrapper" data-js-item="timeline-dateline-wrapper">
					<ol class="timeline__dateline-date-wrapper">
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-activedate" style="left:100px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-1" data-index="0" data-js-position="100"><span class="timeline__event-date">2008</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:290px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-2" data-index="1" data-js-position="290"><span class="timeline__event-date">2009</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:480px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-3" data-index="2" data-js-position="480"><span class="timeline__event-date">2010</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:590px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-4" data-index="3" data-js-position="590"><span class="timeline__event-date">2012</span></button>
						</li>
						<li class="timeline__dateline-item">
							<button class="timeline__dateline-date-button is-newdate" style="left:760px;" data-js-item="timeline__dateline-date-button" data-js-id="image-description-5" data-index="4" data-js-position="760"><span class="timeline__event-date">2014</span></button>
						</li>
					</ol>
					<span class="timeline__dateline-filledLine" data-js-item="timeline-dateline-filledLine" aria-hidden="true"></span>
				</div>
			</div>
		</div>
	</div>
</div>

TIMELINE-USAGE (Standard Module )

src/app/shared/components/timeline/templates

Demo Section

Timeline test

Timeline

Timeline

Timeline

Readme

timeline

Description

JIRA

Requirements

Installation

Installation with Veams

Templates

timeline-usage.hbs

timeline.hbs

timeline__controls.hbs

timeline__item.hbs

timeline__list.hbs

timeline__pagination.hbs

timeline__line-date.hbs

Data File

timeline.hjson

Styles

_timeline.scss

Scripts

timeline.js

HTML Output

Timeline test

Timeline

Wonach suchst du?