j-Swiper

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Ο Ραπέρ για Βιβλιοθήκη Swiper.js

ΕΠΙΤΡΟΦΗ:

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 άδεια.

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>