# j-Carousel

> j-Carousel : prend en charge les gestes tactiles (balayage) et la taille réelle fixe sur mobile ; apprendre de l'exemple

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 23c7900b9dc8fa9b7101a1f2525bef3bd8048b2404eb7d0250b832ef4c50bef5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- prend en charge les gestes __touch (balayage)__ et la taille réelle fixe sur mobile
__Configuration__ :

- Intervalle d'animation `animate {Number}` (par défaut : `3000`, zéro `0` désactive l'animation)

__Méthodes__ :

- `left` déplace le contenu vers la gauche
- `right` déplace le contenu vers la droite

Utilisez-le avec `<ui-component name="carousel">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```