j-Carousel2

È un semplice componente carousel ottimizzato per computer desktop e dispositivi mobili. Ogni elemento deve essere inserito nell'elemento <figure> (vedere l'esempio).

Configurazione:

• selector {String} un selettore per l'elemento cellulare (default: figure)
• margin {Number} margine tra gli articoli (default: 10)
• Tempo di animazione animate {Number}, 0 disabilita l'animazione (default: 5000)
• delay {Number} A ritardo tra l'animazione (default: 2000)
• parent {String} opzionale, un selettore per ottenere l'altezza
• marginheight {Number} opzionale, un margine per height (default: 0)
• scrolldivider {Number} opzionale, se il count non è dichiarato allora la larghezza element sarà suddivisa in base a questo valore, e il valore sarà utilizzato per scrollLeft (default: 3)
• offsetwidth {Number} opzionale, aumenta la larghezza del contenuto (default: 0)
• duration {Number} opzionale, durata di animazione tra gli oggetti di scorrimento (default: 300)
• durationsnap {Number} opzionale, durata per l'animazione (default: 200)
• count {Number} Numero di oggetti visibili (default: 1)
• NEW: countxs {Number} opzionale
• NEW: countsm {Number} opzionale
• NEW: countmd {Number} opzionale
• NEW: countlg {Number} opzionale

Metodi:

• component.move('next|right/prev|left') scorrere il contenuto a destra o a sinistra
• component.focus('data-id value') scorrono alla figura specifica con l'attributo data-id

Buono sapere:

Se il percorso del componente è cambiato, allora il componente riassume tutte le cellule.

Utilizzare con <ui-component name="carousel2">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>