j-Carousel2

Jedná se o jednoduchý karosér optimalizovaný pro desktopové počítače a mobilní zařízení.Každý prvek musí být vkládán do prvku <figure> (viz příklad).

Konfigurace:

• selector {String} selektor pro buněčný prvek (předvolený: figure)
• margin {Number} levé hranice mezi položkami (default: 10)
• animate {Number} animace timeout, 0 deaktivuje animace (předvolené: 5000)
• delay {Number} A zpoždění mezi animací (předvolené: 2000)
• parent {String} volitelný, selektor pro získání výšky
• marginheight {Number} volitelné, marže pro height (předvolené: 0)
• scrolldivider {Number} Volitelně, pokud se count není deklarován, pak bude element width rozdělen podle této hodnoty a hodnota bude použita pro scrollLeft (předpokládané 3)
• offsetwidth {Number} je volitelný, zvyšuje šířku obsahu (předběžně: 0)
• duration {Number} volitelné, animace trvání mezi skřínícími položkami (default: 300)
• durationsnap {Number} volitelně, doba trvání snap animace (podmínkou: 200)
• Počet viditelných položek count {Number} (předvolené číslo: 1)
• NEW: countxs {Number} volitelné
• NEW: countsm {Number} volitelné
• NEW: countmd {Number} volitelné
• NEW: countlg {Number} volitelné

Metody:

• component.move('next|right/prev|left') skrývá obsah vpravo nebo vlevo
• component.focus('data-id value') se přepíná na konkrétní číslo s atributem data-id

Dobré vědět:

Pokud se změna směru složky, pak složka znovu shrnuje všechny buňky.

Použijte ji s <ui-component name="carousel2">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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