j-Carousel

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

stöder touch gesturer (swipe) och fast fullstorlek på mobilen

Konfigurera:

animate {Number}-animationsintervall (default: 3000, noll 0 inaktiverar animation)

Metoder:

left flyttar innehållet till
right flyttar innehållet till höger

Använd den med <ui-component name="carousel">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>