j-Carousel2

Este un component carousel simplu optimizat pentru computerele desktop și dispozitivele mobile. fiecare element trebuie să fie încorporat în elementul <figure> (vezi exemplul).

Configurarea:

• selector {String} un selector pentru elementul celular (default: figure)
• margin {Number} marginea în afara elementelor (default: 10)
• animate {Number} animație timout, 0 dezactiva animația (default: 5000)
• delay {Number} – întârziere între animații (default: 2000)
• parent {String} opțional, un selector pentru a obține înălțime
• marginheight {Number} opțional, o marjă pentru height (default: 0)
• scrolldivider {Number} În mod opțional, dacă count dacă nu este declarată, atunci element width va fi împărțit în funcție de această valoare, iar valoarea va fi utilizată pentru scrollLeft În mod implicit: 3)
• offsetwidth {Number} opțional, crește lățimea conținutului (default: 0)
• duration {Number} opțional, durata de animație între elementele de rulare (default: 300)
• durationsnap {Number} opțional, durata pentru animație rapidă (default: 200)
• count {Number} Numărul de elemente vizibile (default: 1)
• _NEW__: countxs {Number} opțional
• _NEW__: countsm {Number} opțional
• _NEW__: countmd {Number} opțional
• _NEW__: countlg {Number} opțional

Metode:

• component.move('next|right/prev|left') scurtează conținutul drept sau în stânga
• component.focus('data-id value') se întoarce la o cifră specifică cu atributul data-id

bine să știi:

Dacă se schimbă calea componentei, atunci componenta rezumă din nou toate celulele.

Utilizați-l cu <ui-component name="carousel2">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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