j-Carousel2

Είναι ένα απλό συστατικό καρουζέλ βελτιστοποιημένο για υπολογιστές επιφάνειας εργασίας και κινητές συσκευές. κάθε στοιχείο πρέπει να ενσωματωθεί στο στοιχείο <figure> (βλέπε παράδειγμα).

ΕΠΙΤΡΟΦΗ:

• selector {String} ένα επιλεκτικό για το στοιχείο κυττάρου (προεπιλεγμένο: figure)
• margin {Number} αριστερό περιθώριο μεταξύ των στοιχείων (προεπιλεγμένο: 10)
• animate {Number} χρόνος αναμόρφωσης, 0 απενεργοποιεί την animation (προεπιλεγμένη: 5000)
• delay {Number} Η καθυστέρηση μεταξύ της κινούμενης δραστηριότητας (προεπιλεγμένη: 2000)
• parent {String} επιλογή, ένας επιλεκτής για την απόκτηση ύψους
• marginheight {Number} προαιρετική, ένα περιθώριο για το height (προεπιλεγμένο: 0)
• scrolldivider {Number} Εναλλακτικά, αν η count εάν δεν δηλωθεί τότε το element width θα χωριστεί ανάλογα με αυτή την τιμή, και η τιμή θα χρησιμοποιηθεί για scrollLeft (Συμφωνία με την προεπιλογή : 3)
• offsetwidth {Number} επιλογή, αυξάνει το πλάτος περιεχομένου (προεπιλεγμένο: 0)
• duration {Number} επιλογή, διάρκεια κινουμένων σχεδίων μεταξύ των στοιχείων ροής (προεπιλεγμένη: 300)
• durationsnap {Number} προαιρετική, διάρκεια για την αναμνηστική (προεπιλεγμένη: 200)
• Ο αριθμός των ορατών στοιχείων count {Number} (προεπιλεγμένο: 1)
• _NEW__: countxs {Number} προαιρετική
• _NEW__: countsm {Number} προαιρετική
• _NEW__: countmd {Number} προαιρετική
• _NEW__: countlg {Number} προαιρετική

Μέθοδοι:

• Το component.move('next|right/prev|left') στροβίζει το περιεχόμενο δεξιά ή αριστερά
• Το component.focus('data-id value') περιστρέφεται στο συγκεκριμένο αριθμό με το χαρακτηριστικό data-id

Καλό να ξέρεις:

Εάν η πορεία του συστατικού αλλάξει, τότε το συστατικό συνοψίζει όλα τα κύτταρα ξανά.

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

<style>
	.bg { background-color: #F0F0F0; padding: 15px; border-radius: 15px; }
</style>

<ui-component name="carousel2" config="count:3;margin:10" class="invisible">
	<figure>
		<div class="bg">
			<h2>Title 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 5</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 6</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
	<figure>
		<div class="bg">
			<h2>Title 7</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, dolores.</p>
		</div>
	</figure>
</ui-component>