j-Carousel

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

supporta i gesti touch (swipe) e la dimensione completa fissa sul cellulare

Configurazione:

Intervallo di animazione animate {Number} (default: 3000, zero 0 disabilita l'animazione)

Metodi:

left sposta il contenuto
right sposta il contenuto a destra

Utilizzare con <ui-component name="carousel">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.

example.html

<div style="width:500px">
	<ui-component name="carousel" path="datasource" class="invisible">
		<script type="text/html">
			<div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">{{ name }}</div>
		</script>
	</ui-component>
</div>
<br />
<div style="width:500px">
	<ui-component name="carousel" class="invisible">
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">A</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">B</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">C</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">D</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">E</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">F</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">G</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">H</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">I</div></figure>
		<figure><div style="width:300px;background-color:#E0E0E0;height:150px;margin:0 10px 0 0">J</div></figure>
	</ui-component>
</div>

<br />
<button class="exec" data-exec="goLeft"><i class="ti ti-angle-left"></i></button>
<button class="exec" data-exec="goRight"><i class="ti ti-angle-right"></i></button>

<script>

	function goLeft() {
		SETTER('carousel/left');
	}

	function goRight() {
		SETTER('carousel/right');
	}

	var datasource = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'E' }, { name: 'F' }, { name: 'G' }, { name: 'H' }, { name: 'I' }, { name: 'J' }]
</script>