# 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> (pozri príklad).

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 8932de16abf6d9aa5a3b9690fd8c4f148e01c215e6b6ef47f60ecfea303be317
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

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