j-Carousel2

Jest to prosty komponent karuseli zoptymalizowany dla komputerów stacjonarnych i urządzeń mobilnych. Każdy element musi być włożony do elementu <figure> (patrz przykład).

Konfiguracja:

• selector {String} - wybór elementu komórkowego (default: figure)
• margin {Number} pozostaje marża między przedmiotami (default: 10)
• animate {Number} czas wyłączenia animacji, 0 niemożliwia animację (default: 5000)
• delay {Number} A opóźnienie między animacją (default: 2000)
• parent {String} opcjonalny, selektor do uzyskania wysokości
• marginheight {Number} opcjonalny, marża dla height (default: 0)
• scrolldivider {Number} jest opcjonalny, jeśli count nie zostanie ogłoszony, to szerokość element zostanie podzielona według tej wartości, a wartość będzie używana dla scrollLeft (default: 3)
• offsetwidth {Number} opcjonalny, zwiększa szerokość zawartości (default: 0)
• duration {Number} opcjonalny, czas trwania animacji między przedmiotami skręcającymi (default: 300)
• durationsnap {Number} opcjonalny, czas trwania snap animacji (default: 200)
• Liczba widocznych elementów count {Number} (default: 1)
• NEW: countxs {Number} opcjonalny
• NEW: countsm {Number} opcjonalny
• NEW: countmd {Number} opcjonalny
• NEW: countlg {Number} opcjonalny

Metody:

• component.move('next|right/prev|left') skręca zawartość w prawo lub w lewo
• component.focus('data-id value') skręcają się do konkretnej liczby z atrybutem data-id

Dobrze wiedzieć:

Jeśli ścieżka komponentu jest zmieniona, to komponenta ponownie podsumowuje wszystkie komórki.

Użyj go z <ui-component name="carousel2">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>