j-Carousel2

Je to jednoduchý komponent karuselu optimalizovaný pre stolné počítače a mobilné zariadenia. Každý prvok musí byť zabalený do prvku <figure> (pozrite si príklad).

Konfigurácia:

• selector {String} selektor pre bunkový prvok (predvolené: figure)
• margin {Number} ľavý okraj medzi položkami (predvolené: 10)
• Časový limit animácie animate {Number}, 0 zakáže animáciu (predvolené: 5000)
• delay {Number} Oneskorenie medzi animáciou (predvolené: 2000)
• Voliteľne parent {String}, volič pre získanie výšky
• marginheight {Number} voliteľné, rezerva pre height (predvolené: 0)
• scrolldivider {Number} voliteľné, ak count nie je deklarované, šírka prvku sa rozdelí podľa tejto hodnoty a hodnota sa použije pre scrollLeft (predvolené: 3)
• offsetwidth {Number} voliteľné, zväčšuje šírku obsahu (predvolené: 0)
• duration {Number} voliteľné, trvanie animácie medzi posúvajúcimi sa položkami (predvolené: 300)
• durationsnap {Number} voliteľné, trvanie animácie snímky (predvolené: 200)
• count {Number} počet viditeľných položiek (predvolené: 1)
• NOVINKA: countxs {Number} voliteľné
• NOVINKA: countsm {Number} voliteľné
• NOVINKA: countmd {Number} voliteľné
• NOVINKA: countlg {Number} voliteľné

Metódy:

• component.move('next|right/prev|left') posúva obsah doprava alebo doľava
• component.focus('data-id value') roluje na konkrétnu postavu s atribútom data-id

Je dobré vedieť:

Ak sa zmení cesta komponentu, komponent znova zosumarizuje všetky bunky.

Použite ho so <ui-component name="carousel2">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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