# j-Carousel

> j-Carousel: admite gestos táctiles (deslizar) y tamaño completo fijo en dispositivos móviles; aprender del ejemplo

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 6d66166485bf473afca8b8e51dc1c94c956a20c28a6256227fe83e538f908997
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- admite __gestos táctiles (deslizar)__ y se fija en tamaño completo en dispositivos móviles
__Configuración__:

- Intervalo de animación `animate {Number}` (predeterminado: `3000`, cero `0` desactiva la animación)

__Métodos__:

- `left` mueve el contenido hacia la izquierda
- `right` mueve el contenido hacia la derecha

Úselo con `<ui-component name="carousel">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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