j-Carousel2

Това е проста карусел компонент, оптимизиран за настолни компютри и мобилни устройства. всеки елемент трябва да бъде вграден в елемента <figure> (виж пример).

Конфигуриране:

• selector {String} селектор за клетъчен елемент (предварително: figure)
• margin {Number} е маржът между елементите (предварително: 10)
• animate {Number} Анимация на времето, 0 Анимация за дефекти (дефолт: 5000)
• delay {Number} Закъснение между анимацията (дефинирано: 2000)
• parent {String} опция, селектор за получаване на височина
• marginheight {Number} опционален, марж за height (дефолт: 0)
• scrolldivider {Number} опционално, ако count не е деклариран, тогава element ширина ще бъде разделена според тази стойност, а стойността ще се използва за scrollLeft (предварително: 3)
• offsetwidth {Number} опционално, увеличава ширината на съдържанието (дефолт: 0)
• duration {Number} опция, анимационна продължителност между елементи за преминаване (дефолт: 300)
• durationsnap {Number} опционално, продължителност за анимация (предварително: 200)
• count {Number} Брой видими елементи (дефолт: 1)
• НОВА: countxs {Number} опционално
• НОВА: countsm {Number} опционално
• НОВА: countmd {Number} опционално
• НОВА: countlg {Number} опционално

Методи:

• component.move('next|right/prev|left') преминава съдържанието отдясно или отляво
• component.focus('data-id value') Връщане към конкретната фигура с data-id атрибути

Добре е да се знае:

Ако съставът се променя, тогава компонентът обобщава всички клетки отново.

Използвайте го с <ui-component name="carousel2">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка 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>