j-Carousel2

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.

<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>