j-Carousel2

Egy egyszerű karosszel komponens optimalizált asztali számítógépek és mobil eszközök. Minden elem kell beépíteni a <figure> elem (lásd például).

konfiguráció:

• selector {String} a sejtek elemének kiválasztója (default: figure)
• margin {Number} a tárgyak között (default: 10)
• animate {Number} animációs időtávolság, 0 eltiltja az animációt (default: 5000)
• delay {Number} A késés az animáció között (default: 2000)
• parent {String} opcionális, kiválasztó a magasság megszerzéséhez
• marginheight {Number} opcionális, a height marginja (default: 0)
• scrolldivider {Number} opcionális, ha a count nem nyilvánított, akkor a elem szélessége osztódik ennek az értéknek megfelelően, és az értéket használják a scrollLeft (default: 3)
• offsetwidth {Number} opcionális, a tartalmak szélességének növelése (default: 0)
• duration {Number} opcionális, animációs időtartam az elemek között (default: 300)
• durationsnap {Number} opcionális, időtartam a snap animáció (default: 200)
• A látható elemek számának count {Number} (default: 1)
• NEW: countxs {Number} opcionális
• NEW: countsm {Number} opcionális
• NEW: countmd {Number} opcionális
• NEW: countlg {Number} opcionális

módszerek:

• A component.move('next|right/prev|left') a tartalmat jobbra vagy balra forgatja
• A component.focus('data-id value') a data-id tulajdonsággal rendelkező konkrét számra forog

Jó tudni:

Ha az összetevő útját megváltoztatják, akkor a komponens újra összefoglalja az összes sejtet.

Használja a <ui-component name="carousel2">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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