j-Carousel2

Het is een eenvoudige carouselcomponent die is geoptimaliseerd voor desktop computers en mobiele apparaten. elk element moet in het <figure>-element worden opgenomen (zie bijvoorbeeld).

Configuratie:

• selector {String} een selector voor het celelement (default: figure)
• margin {Number} links marge tussen items (default: 10)
• animate {Number} animatie timeout, 0 disable animatie (default: 5000)
• delay {Number} A vertraging tussen animatie (default: 2000)
• parent {String} optioneel, een selecteur voor het verkrijgen van hoogte
• marginheight {Number} optioneel, een marge voor height (default: 0)
• scrolldivider {Number} Optieel, als de count niet aangegeven dan wordt de element breedte verdeeld volgens deze waarde, en de waarde zal worden gebruikt voor scrollLeft (De standaard is : 3)
• offsetwidth {Number} optioneel, verhoogt de inhoud breedte (default: 0)
• duration {Number} optioneel, animatieduur tussen scrolling items (default: 300)
• durationsnap {Number} optioneel, duur voor snap animatie (default: 200)
• count {Number} aantal zichtbare items (default: 1)
• NEW: countxs {Number} optioneel
• NEW: countsm {Number} optioneel
• NEW: countmd {Number} optioneel
• NEW: countlg {Number} optioneel

Methoden:

• component.move('next|right/prev|left') scrollt de inhoud rechts of links
• component.focus('data-id value') scrollt naar de specifieke getal met de data-id attribute

Goed om te weten:

Als de route van de component wordt gewijzigd, resumeert de componente alle cellen opnieuw.

Gebruik het met <ui-component name="carousel2">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

<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>