# j-Carousel2

> Ist eine einfache Karussellkomponente, die für Desktop-Computer und mobile Geräte optimiert ist. Jedes Element muss in das <figure>-Element eingeschlossen werden (siehe Beispiel).

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 8841442e390548124fd63041eac51598d26d519369b9a25304815bed4bae66f9
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ist eine einfache Karussellkomponente, die für Desktop-Computer und mobile Geräte optimiert ist. Jedes Element muss in das Element `<figure>` eingeschlossen werden (siehe Beispiel).


__Konfiguration__:

- `selector {String}` ein Selektor für Zellelement (Standard: `figure`)
- `margin {Number}` linker Rand zwischen Elementen (Standard: `10`)
- `animate {Number}`-Animations-Timeout, `0` deaktiviert die Animation (Standard: `5000`)
- `delay {Number}` Eine Verzögerung zwischen Animationen (Standard: `2000`)
- `parent {String}` optional, ein Selektor zum Erhalten der Höhe
- `marginheight {Number}` optional, ein Spielraum für `height` (Standard: `0`)
- `scrolldivider {Number}` optional, wenn `count` nicht deklariert ist, wird die __Elementbreite__ entsprechend diesem Wert geteilt und der Wert wird für `scrollLeft` verwendet (Standard: `3`)
- `offsetwidth {Number}` optional, erhöht die Inhaltsbreite (Standard: `0`)
- `duration {Number}` optional, Animationsdauer zwischen scrollenden Elementen (Standard: `300`)
- `durationsnap {Number}` optional, Dauer für Snap-Animation (Standard: `200`)
- `count {Number}` Anzahl der sichtbaren Elemente (Standard: `1`)
- __NEU__: `countxs {Number}` optional
- __NEU__: `countsm {Number}` optional
- __NEU__: `countmd {Number}` optional
- __NEU__: `countlg {Number}` optional

__Methoden__:

- `component.move('next|right/prev|left')` scrollt den Inhalt nach rechts oder links
- `component.focus('data-id value')` scrollt zu der spezifischen Zahl mit dem Attribut `data-id`

__Gut zu wissen__:

Wenn der Pfad der Komponente geändert wird, fasst die Komponente alle Zellen erneut zusammen.

Verwenden Sie es mit `<ui-component name="carousel2">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<style>
	.bg { background-color: #F0F0F0; padding: 15px; border-radius: 15px; }
</style>

<ui-component name="carousel2" config="count:3;margin:10" class="invisible">
	<figure>
		<div class="bg">
			<h2>Title 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 5</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 6</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 7</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
</ui-component>
```