# j-Swiper

> j-Swiper: Παρουσιάζει [Βιβλιοθήκη Swiper.js](https://swiperjs.com/)· εύκολη χρήση

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

- Ο Ραπέρ για [Βιβλιοθήκη Swiper.js](https://swiperjs.com/)
__ΕΠΙΤΡΟΦΗ__:

- `slidesperview {Number}` αριθμός των στοιχείων στο ένα σάιτ (προεπιλεγμένο: `1`)
- `spacebetween {Number}` ένα χώρο μεταξύ των στοιχείων (προεπιλεγμένο: `0`)
- `navigation {Boolean}` εμφανίζει / κρύβει ρεύματα πλοήγησης (επιλογή: `false`)
- Πυροβολισμοί προβολής / κρυφής σελίδας `pagination {Boolean}` (προεπιλεγμένη: `false`)
- Το `autoplay {Boolean}` επιτρέπει την αυτοσυναρμολόγηση (προεπιλεγμένο: `false`)
- `delay {Number}` μια καθυστέρηση μεταξύ των μεταβλητών, που λειτουργεί μόνο με αυτόματη πληκτρολόγηση (προεπιλεγμένη: `2500`)
- `loop {Boolean}` ατελείωτο κύκλο μέσα από τις σκιές (προεπιλεγμένο: `false`)
- __NEW__ `reset {Number}` χρόνος μετά τον οποίο ο μετασχηματιστής επανεκκινείται και επιστρέφει στην πρώτη εικόνα (ενσωματώνεται σε λεπτά)
- __NEW__ `freemode {Boolean}` μετακινούμενες αποχρώσεις χωρίς σταθερή ευθυγράμμιση με τις μεμονωμένες αποχρωμές (προεπιλογή: `false`)

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

```html example.html
<div style="margin-bottom:30px">
	<ui-component name="swiper" path="datasource" config="slidesperview:3;spacebetween:30;pagination:1;navigation:1" class="hidden invisible">
		<script type="text/html">
			<div style="background-color:#E0E0E0;height:150px;color:#000">{{ name }}</div>
		</script>
	</ui-component>
</div>

<div>
	<ui-component name="swiper" config="slidesperview:3;autoplay:1" class="hidden invisible">
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">A</div></figure>
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">B</div></figure>
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">C</div></figure>
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">D</div></figure>
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">E</div></figure>
		<figure class="swiper-slide"><div style="background-color:#E0E0E0;height:150px;color:#000">F</div></figure>
	</ui-component>
</div>
<script>
	var datasource = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'E' }, { name: 'F' }, { name: 'G' }, { name: 'H' }, { name: 'I' }, { name: 'J' }]
</script>
```