j-Carousel2

Det är en enkel karusellkomponent som optimeras för skrivbord och mobila enheter. Varje element måste vara inbyggd i elementet <figure> (se exempel).

Konfigurera:

• selector {String} en selektor för cellelement (default: figure)
• margin {Number} vänster marginal mellan objekt (default: 10)
• animate {Number} animation timout, 0 inaktiverar animation (default: 5000)
• delay {Number} A försening mellan animation (default: 2000)
• parent {String} valfritt, en selektor för att få höjd
• marginheight {Number} valfritt, en marginal för height (default: 0)
• scrolldivider {Number} är valfritt, om count inte deklareras så kommer elementbredden att delas enligt detta värde och värdet kommer att användas för scrollLeft (default: 3)
• offsetwidth {Number} är valfritt, ökar innehållets bredd (default: 0)
• duration {Number} valfritt, animeringsperiod mellan spårning objekt (default: 300)
• durationsnap {Number} valfritt, varaktighet för snap animation (default: 200)
• count {Number} Antal synliga objekt (default: 1)
• NEW: countxs {Number} valfritt
• NEW: countsm {Number} valfritt
• NEW: countmd {Number} valfritt
• NEW: countlg {Number} valfritt

Metoder:

• component.move('next|right/prev|left') vrider innehållet till höger eller vänster
• component.focus('data-id value') snurrar till den specifika siffran med data-id attribut

Bra att veta:

Om komponenten ändras sammanfattar komponenten alla celler igen.

Använd den med <ui-component name="carousel2">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.

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