# j-Carousel

> j-Carousel: Υποστηρίζει τις κινήσεις επαφής (swipe) και το σταθερό πλήρες μέγεθος στο κινητό; Μάθετε από το παράδειγμα

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

- Υποστηρίζει τις χειρονομίες __touch (swipe)__ και το σταθερό πλήρες μέγεθος στο κινητό
__ΕΠΙΤΡΟΦΗ__:

- `animate {Number}` διαστήματα κινουμένων σχεδίων (επιλογή: `3000`, μηδέν `0` απενεργοποιεί την κινουμένη)

__Μέθοδοι__:

- Το `left` μεταφέρει το περιεχόμενο
- Το `right` μεταφέρει το περιεχόμενο προς τα δεξιά

Χρησιμοποιήστε το με `<ui-component name="carousel">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>
```